Getting started with Web Workers

How to create a Web Workers?
Var worker = new Worker ('task. js ');
Worker. onmessage = function (event ){
Console. log (event. data + "Jan! ");
};
Worker. postMessage ("Hello ");
Worker. onerror = function (event ){
Console. log ("ERROR:" + event. filename + "(" + event. lineno + "):" + event. message );
}

Task. js
Self. onmessage = function (event ){
Var data = event. data + "! My name is ";
Self. postMessage (data );
}

First, you must understand what Web Workers is?

Web Workers allows the browser to implement multi-threading for script processing, and aims to solve page congestion caused by massive data processing.
However, the code in the Web Worker cannot perform DOM operations.
Because Worker is an independent scope and independent from browsers, it can only perform operations on the JavaScript core (ECMAScript.

The following describes the specific methods:

Worker
Create a new Web Worker.
Var worker = new Worker ('task. js ');
When this code is executed, the browser loads the file task. js.
After the js file is loaded, it will not be executed immediately. The Worker script is executed only when the message is received.
Currently, Web Worker cannot implement cross-origin scripts.

Onmessage
Worker. onmessage = function (event ){...};
The onmessage method must be bound with a callback function.
When a message event is triggered, the callback function is executed. And pass the data returned by the Worker script into the callback function.
The returned data is actually a MessageEvent object. The processed data is actually stored in the data attribute of the MessageEvent object.

PostMessage
Worker. postMessage ("Hello ");
The postMessage method is used to transmit information. When the information is successfully transferred, a message event is triggered.
PostMessage triggers the message event regardless of the parameter.
In addition, data transmission implemented by postMessage is executed asynchronously.
JSON structure values can also be passed as parameters:
Worker. postMessage ({
Name: "Jan ",
Age: "99"
});

Onerror
Worker. onerror = function (event ){
Console. log ("ERROR:" + event. filename + "(" + event. lineno + "):" + event. message );
} Www.2cto.com
The onerror method also needs to bind a callback function. When the Worker script cannot be executed smoothly, an error event is triggered and the bound callback function is executed.

Terminate
Worker. terminate ();
Terminate method, which can be used to stop the currently running Worker script:

In the Worker script, the principle is basically the same as that of the worker object on the page.
You can use onmessage to receive data transmitted on the page and execute the bound function.
You can also transmit data to the page through postMessage.
However, the Code is as follows:
Self. close ();
Of course, you can also inject js files into the Worker script:
ImportScript ("task1.js", "task2.js", "task3.js ");
Code execution sequence: task1.js-> task2.js-> task3.js

 

Author: jiancm2001