We all know that the browser executes js code in a single thread. When the page step is executed, the page cannot respond to anything else until the step ends. The WebWorkers introduced here can change everything.
WebWorkers are js codes that run in the background, independent of other scripts and will not affect the performance of the page. We can continue to do whatever we want: click, select content, etc., while the WebWorkers run in the background.
Web workers are supported by all major browsers except Internet Explorer.
The first step: generate workers.Call the Worker() constructor and specify the URI of a script to be run in the worker thread. For example, the current page specifies that the script executed by the worker thread is script-worker.js.
var myWorker = new Worker(script-worker.js);
In script-worker.js we can execute additional code, and the execution of this code will not affect the page to do other things you want to do, which sounds great.
Step 2: Pass the data.The page can interact with the worker to transfer data, so that the worker can calculate silently without affecting the page's ability to do meaningful things. Then tell the page to use the data.
//[Main page code]myWorker.postMessage(data-from-mainpage);//[worker code]onmessage = function (oEvent) { console.log(The data sent from the main page is: +oEvent.data)); };The above is the situation of [the main page sends data to the worker script], yes, you saw the very friendly postMessage, okay, I like this thing.
//[Main page code] myWorker.onmessage = function (oEvent) { console.log(The data sent by the worker script is: +oEvent.data)); }; //[Worker code]postMessage(data-from-mainpage );The above is the situation of [worker script sending data to the main page]. It is still very simple, but these are just APIs. The key is that clever use is beneficial.
In addition, there may be errors in worker execution, and the main page passes:
myWorker.onerror=function(oEvent){};You can monitor worker errors.
Step 3: Important points.The worker thread can perform tasks without interfering with the UI. The executed JavaScript code is completely in another scope and does not share the scope with the code in the current web page.
The importScripts() method is provided in the global scope of Worker, which receives one or more URLs pointing to JavaScript files. The loading process is performed asynchronously.
importScripts() will only take effect if you provide an absolute URI, and the execution process is also asynchronous.
When we create the WebWorkers object, it will continue to listen for messages (even after the external script is completed) until it is terminated. Use the myWorker.terminate() method to terminate the WebWorkers and release the browser/computer resources.
Step 4: Important limitations.1. Unable to access DOM nodes, global variables or global functions, unable to call functions such as alert() or confirm, and unable to access browser global variables such as window and document;
2. However, Javascript in Web Worker can still use functions such as setTimeout() and setInterval(), and can also use the XMLHttpRequest object for Ajax communication.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.