Web workers multithreading in Html5

Web workers multithreading in Html5

Web Workers is a javascript multithreading solution provided by HTML5. We can submit some code with a large amount of computing workload to web Worker to run without freezing the user interface.

1. First look at an instance:

1) js file (test. js)

 

var fibonacci =function(n) {    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);};onmessage =function(event) {    var n = parseInt(event.data, 10);    postMessage(fibonacci(n));};

2XX HTML page (test.html)

 

 

<Script type = text/javascript> | r | var worker = new Worker ('test. js'); | r | worker. onmessage = function (evt) {| r | alert (evt. data); | r |} | r | function onload () {| r | worker. postMessage (40); | r |}| r | onload (); | r | </script> sfsdfdsfdsfdfdsf Note:

 

1. The above example should be put on the server for running. (Chrome does not support local)

2. The above example shows that the page will first render the html content in the body, execute the calculation in the Child thread, and pass the result to the main thread after the child thread completes the calculation. If the web workers is not used and the computing part is directly placed in the main thread, the browser is in a single thread and will be executed sequentially, resulting in the following page being unable to be loaded.

2. web workers process:

 

Main WEB thread:
1. Load a JS file through worker = new Worker (url) to create a worker and return a worker instance.
2. The worker. postMessage (data) method is used to send data to the worker.
3. Bind worker. onmessage to receive data sent by worker.
4. worker. terminate () can be used to terminate the execution of a worker.

New worker thread:
1. send data to the main thread through the postMessage (data) method.
2. Bind The onmessage method to receive data sent by the main thread.

3. web workers knowledge points:
1. worker. onmessage
Message events bound to the main thread. When the worker calls the postMessage method, the bound event handler is called. The transmitted data can be obtained using the data attribute of MouseEvent, you can also obtain the worker object through the target attribute.

2. What is self?
Self is a reference of itself in woker.

3. close ()
The effect of calling the close () method inside the worker is the same as that of calling the terminate () method of the worker instance externally.

4. onmessage
Receive the parameters passed by the external caller in this handle. The parameters can be obtained through e. data.

5. self. postMessage ()
In this way, we can pass the result to the main thread in the worker. The handler of the message event bound to the main thread will be called.

6. Brand new JavaScript Environment
When a Worker instance is created, it is completely separated from the script used to create a worker in a completely new JavaScript running environment, even if the messages we pass are of reference type, they are also transmitted through replication. Modifying the parameters in the worker does not affect the parameters in the creation script.

7. importScripts ()
We can use the importScripts () method to load the library function in worker through the url, as follows:
ImportScripts ('ity ity/dialog. js', 'common/cookie. js ');
The method can accept multiple URLs. the url of the relative address is based on the current worker. The method downloads the running Library Function in order of parameters. If an error occurs in a script, the rest will not be loaded and executed, and this method is synchronized. It will only be returned after all the scripts are loaded and run.
Note: The importScripts method can load cross-origin files. When using the worker constructor, The js file can only be the same source.

8. worker execution model
The worker thread runs its code synchronously from top to bottom, and then enters the asynchronous phase to respond to the event and timer. If the worker registers the message event handler, as long as it can trigger the event, the worker will remain in the memory and will not exit. However, if the worker does not listen to messages, it will exit after all tasks are executed (including counters.

9. What can be used in web worker?
1) self reference
2) global objects that can use JavaScript: JSON, Date (), Array
3) location object, but its attributes are read-only, and the modification does not affect the caller.
4) navigator object
5) setTimeout (), setInterval () and corresponding clearing method
6) addEventListener () and removeEventListener ()
7) At last, the web worker also supports sub worker and shared worker, which is not very detailed and the browser compatibility is not ideal. If you are interested, you can search for it online.

10. web worker vulnerabilities:
1) The window object and docuemnt object (dom object) cannot be used in worker, that is, dom operations cannot be shared in the master or child thread.
2) js that cannot load work across regions (when using the work constructor)
3) web worker can only be used to load json data in the same domain. In this respect, ajax can be achieved and the efficiency is higher and more universal. Let Worker do what it is good.