HTML5 solution to prevent the browser from being suspended

During Web development, the browser will often encounter events that do not respond to a false state, or even a prompt box "the script runs for too long" appears. If this happens, your script is out of control.

A browser has at least three threads: js engine threads (processing js), GUI rendering threads (rendering pages), and browser event triggering threads (controlling interaction ).

1. The JavaScript engine is based on the event-driven single-thread execution. The JS engine is waiting for the arrival of tasks in the task queue to be processed, the browser has only one JS thread running the JS program at any time.
2. The GUI rendering thread is responsible for rendering the browser interface. When the interface needs to be repainted or reflow is triggered due to some operation, this thread will execute. However, you must note that the GUI rendering thread and JS engine are mutually exclusive. When the JS engine is executed, the GUI thread will be suspended, GUI updates are saved in a queue and executed immediately when the JS engine is idle.
3. Event trigger thread. When an event is triggered, the thread adds the event to the end of the queue to be processed, waiting for processing by the JS engine. These events can come from the code blocks currently executed by the JavaScript engine, such as setTimeOut, other threads from the browser kernel, such as mouse clicks and AJAX asynchronous requests, however, because of the single-threaded relationship of JS, all these events have to be queued for processing by the JS engine.

After learning about the browser's kernel processing method, it is not difficult to understand why the browser enters a false state. When a Javascript script occupies a processing machine for a long time, it suspends the browser's GUI update, however, the subsequent event responses are not processed in the queue, causing the browser to be locked and enter the suspended state. In addition, DOM operations are performed in the JS script. Once the JS call ends, a GUI rendering is performed immediately before the next task is executed, therefore, a large number of DOM operations in Javascript will also lead to slow Event Response and even truly stuck browsers, such as inserting a large number of HTML files in IE6 next time. If the prompt box "the script has been running for too long" is displayed, it indicates that your JS script must have an endless loop or a deep recursive operation.

Now, if this happens, we can not only optimize the code, but html5 webWorkers provides the js backend processing thread API, it allows processing of complex and time-consuming JavaScript logic in the browser background thread, so that js threads do not block rendering of UI threads. This thread cannot interact with pages, such as getting elements and alert. Multiple Threads can also pass data through the same method.

Example: enter a number for addition (+ =)

Previous practices:

<! Doctype html> 
After webWorkers is used:
<! Doctype html> 
Calculate. js
onmessage = function(event){    var num = event.data;    var result = 0;    for(var i = 0; i< num;i++){        result += i;    }    postMessage(result);};
WebWorker needs to put the code into the web server. If localhost is used, open it in a later version of chrome browser. "cocould not get domain!" appears in firefox when processing localhost !" Error, for this can refer to: https://bugzilla.mozilla.org/show_bug.cgi? Id = 682450
Compared with the above two implementation methods, when the calculation value reaches 10 billion, the general practice takes a long time and is usually stuck. It can be seen that webWorkers is very valuable in future web applications.