Raid on HTML5 Javascript API Extension 1—Web Worker Asynchronous Execution and Related Overview_html5 tutorial skills

Javascript execution mechanism
Before HTML5, the execution of JavaScript in browsers worked in a single-threaded manner, although there are many ways to simulate multi-threading (for example: in Javascript setinterval method, setTimeout method, etc.), but in essence, the running of the program is still performed by the JavaScript engine in a single-thread scheduling manner. The worker thread introduced in HTML5 allows the browser-side Javascript engine to execute Javascript code concurrently, thereby achieving good support for browser-side multi-threaded programming.

Multiple threads in Javascript - WebWorker
Web Worker in HTML5 can be divided into two different thread types, one is a dedicated thread Dedicated Worker, and the other is a shared thread Shared Worker. Both types of threads serve different purposes.
Dedicated web worker
A dedicated worker is connected to the script that created it. It can communicate with other workers or browser components, but it cannot communicate with the DOM. The meaning of dedicated, I think, is that this thread only handles one requirement at a time. Dedicated threads are implemented in various mainstream browsers except IE and can be used with confidence.
Creating a thread
Creating a worker is very simple. Just pass the file name of the JavaScript file that needs to be executed in the thread to the constructor.
Thread communication
To communicate between the main thread and the sub-thread, the postMessage and onmessage methods of the thread object are used. No matter who sends data to whom, the sender uses the postMessage method, and the receiver uses the onmessage method to receive data. postMessage has only one parameter, which is the transferred data, and onmessage also has only one parameter. If it is an event, the received data is obtained through event.data.
Send JSON data
JSON is something natively supported by JS. There is no need to use it in vain. Use JSON to transmit complex data. For example:

Copy code

The code is as follows:

postMessage({'cmd': 'init', 'timestamp': Date.now()});

Handling errors
When an error occurs in a thread, its onerror event callback will be call. So the way to handle errors is very simple, which is to hook the onerror event of the thread instance. This callback function has a parameter error, which has 3 fields: message - the error message; filename - the script file where the error occurred; lineno - the line where the error occurred.
Destroy the thread
Inside the thread, use the close method to destroy itself. In the main thread outside the thread, use the terminate method of the thread instance to destroy the thread.
Let’s look at the basic operation of threads from an example:
HTML code:

Copy code

The code is as follows :