Once a worker thread is created successfully, it will always run without being interrupted by activities on the main thread (e.g., user clicks on buttons, form submissions). This makes it easier to respond to communication from the main thread at all times. However, it also means that the worker is resource-intensive and should not be overused, and should be closed once it has been used.
The Web Worker has the following points of caution for use.
1.1. Homologous restrictions
The script file assigned to the worker thread to run must be the same source as the main thread’s script file.
1.2. DOM Limitations
The global object where the worker thread is located, unlike the main thread, cannot read the DOM object of the web page where the main thread is located, nor can it use the document, window, and parent objects. However, the Worker thread can navigator object and location object.
1.3. Communication Contact
Worker threads and main threads are not in the same context, they cannot communicate directly and must do so via messages.
1.4. Script Restrictions
The worker thread cannot execute the alert() method and confirm() method, but can issue AJAX requests using the XMLHttpRequest object
1.5. File Restrictions
The worker thread cannot read local files, i.e. it cannot open the local file system (file://), and the scripts it loads must come from the network.
2. Basic usage
2.1. Main threads
The thread uses the new command to call the Worker() constructor to create a new Worker thread.
The argument to the
Worker() constructor is a script file that is the task to be executed by the Worker thread. Since the Worker cannot read local files, this script must come from the network. If the download does not succeed (e.g., a 404 error), the worker fails silently.
Then, the main thread calls the
worker.postMessage() method to send a message to the Worker.
The argument to the
worker.postMessage() method is the data that the main thread passes to the
Worker. It can be of various data types, including binary data.
Then, the main thread specifies the listener function via
worker.onmessage to receive the message sent back by the child thread.
In the above code, the
data property of the event object gets the data sent by the
Worker finishes its task, the main thread can shut it down.
2.2. Worker threads
The worker thread needs to have a listener function inside it that listens for
In the above code, self represents the subthread itself, i.e. the global object of the subthread. Therefore, it is equivalent to the following two ways of writing.
In addition to using
self.addEventListener() to specify the listener function, you can also use
self.onmessage to specify it. The argument to the listener function is an event object whose
data property contains the data sent by the main thread. The
self.postMessage() method is used to send a message to the main thread.
Depending on the data sent by the main thread, the
Worker thread can call different methods, here is an example.
In the above code,
self.close() is used to close itself inside
2.3. Worker load script
There is a special method
importScripts() inside the Worker if you want to load other scripts.
This method can load multiple scripts at the same time.
2.4. Error Handling
The main thread can listen to
Worker to see if an error occurs. If an error occurs,
Worker will trigger the
error event of the main thread.
Worker can also listen for
error events internally.
2.5. Close Worker
When you have finished using it, you must close Worker in order to save system resources.
3. Data Communication
As mentioned earlier, the content of communication between the main thread and the
Worker can be either text or objects. It should be noted that this communication is a copy relationship, i.e., it passes values instead of addresses, and any changes made by
Worker to the communication content will not affect the main thread. In fact, the internal mechanism of the browser is to serialize the communication content, and then send the serialized string to
Worker, who then restores it.
Binary data, such as File, Blob, ArrayBuffer, and other types, can also be exchanged between the main thread and the worker, and can also be sent between threads. Here is an example.
If you want to transfer control of the data directly, you have to use the following write method.
4. Web Worker for the same page
The above is a script embedded in a web page. Note that you must specify that the type attribute of the
<script> tag is a value that the browser does not recognize, in the above case
Then, this embedded script is read and processed with
In the above code, the script code embedded in the web page is first converted into a binary object, then a URL is generated for the binary object, and then the Worker loads the URL, so that both the main thread and the Worker’s code are on the same web page.
5. Example: Worker thread completes polling
Sometimes, browsers need to poll the server state to be the first to know about state changes. This can be done in the Worker.
In the above code, the worker polls the data once every second and compares it with the cache. If it doesn’t match, there is a new change on the server side, so the main thread is notified.
6. Example: Worker New Worker
New worker threads can be created inside worker threads (currently only supported by Firefox browser). The following example takes a computationally intensive task and assigns it to 10 workers
The main thread code is as follows.
The code of the worker thread is as follows.
In the above code, 10 new Worker threads are created inside the Worker thread and messages are sent to each of the 10 Workers in turn, informing them of the start and end points of the computation. The code of the computation task script is as follows.
7.1. Main threads
Worker() constructor is natively provided by the browser for the main thread to generate the worker thread.
Worker() constructor, can accept two parameters. The first parameter is the URL of the script (which must comply with the same-origin policy), which is required and can only load JS scripts, otherwise it will report an error. The second parameter is a configuration object, which is optional. One of its roles is to specify the name of the worker, which is used to distinguish between multiple worker threads.
The Worker() constructor returns a Worker thread object for the main thread to manipulate the Worker.The properties and methods of the Worker thread object are as follows.
Worker.onerror: Specifies the listener function for the error event.
Worker.onmessage: specifies the listener function for the message event, the data sent is in the Event.data property.
Worker.onmessageerror: specifies the listener function for the messageerror event. This event will be triggered when the sent data cannot be serialized to a string.
Worker.postMessage(): sends a message to the worker thread.
Worker.terminate(): terminate the worker thread immediately.
7.2. Worker threads
Web Worker has its own global object, not the main thread’s
window, but a global object customized for the
Worker. So not all the objects and methods defined on
window are available.
Worker thread has some global properties and methods of its own.
self.name: the name of the worker. This property is read-only and is specified by the constructor.
self.onmessage: the listener for the message event.
self.onmessageerror: specifies the listener function for the messageerror event. This event will be triggered when the sent data cannot be serialized to a string.
self.close(): Close the worker thread.
self.postMessage(): send a message to the worker thread that spawned it.
self.importScripts(): Load JS scripts.