Detailed explanation of multi-thread development and use of H5+WebWorkers

This time I will bring you a detailed explanation of the use of H5 WebWorkers multi-threaded development. What are the precautions for H5 WebWorkers multi-threaded development? The following is a practical case, let's take a look.

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 all this. .

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.

Step one: Generate workers.

Call Worker()Constructor, 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. The execution of these codes will not affect the page to do other things you want to do, which sounds great.

Step 2: Pass data.

The page can interact with the worker to transfer data, so that the worker can calculate silently without affecting the page to do meaningful things. Then tell the page to use the data.

//[主页面代码]
myWorker.postMessage("data-from-mainpage");
//[worker代码]
onmessage = function (oEvent) {
    console.log("主页面发送过来的数据是："+oEvent.data));    
};

The above is the situation of [the main page sending data to the worker script], yes, you saw the very friendly postMessage, okay, I like this thing.

 //[主页面代码]
 myWorker.onmessage = function (oEvent) {
     console.log("worker脚本发送过来的数据是："+oEvent.data)); 
 }; 
//[worker代码]
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. The main page can monitor worker errors through:

myWorker.onerror=function(oEvent){};

.

Step 3: Important points.

The worker thread can perform tasks without interfering with the UI. The JavaScript code executed is completely in another scope and is different from the code in the current web page. Shared scope.

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.

After 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 WebWorkers and release browser/computer resources. .

Step 4: Important restrictions.

1. Unable to access DOM nodes, unable to access global variables or global functions, unable to call alert() or confirm etc. Functions and browser global variables such as window and document cannot be accessed;

2. However, Javascript in Web Worker can still use functions such as setTimeout() and setInterval(). You can also use the XMLHttpRequest object for Ajax communication.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps of webpack packaging and compression of js and css

jquery fullpage plug-in adds header and tail copyright Related

The above is the detailed content of Detailed explanation of multi-thread development and use of H5+WebWorkers. For more information, please follow other related articles on the PHP Chinese website!