How to implement multi-threading in javascript

In js, you can use the Worker class to implement multi-threading. The syntax format is "var worker = new Worker (js file path);". When using this class, it will apply for a new thread from the browser, which is used to execute a js file alone.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

We all know that JS is a single-threaded language. Even some asynchronous events are run on the main thread of JS (specifically how to run, you can read my other blog JS code running mechanism ). Asynchronous requests like setTimeout, ajax, or some events of DOM elements are all executed on the JS main thread. These operations do not open new threads in the browser for execution, but when these asynchronous operations are operated or It only enters the event queue when it is triggered, and then starts running in the JS main thread.

First let’s talk about the browser threads. The main threads in the browser include the UI rendering thread, the JS main thread, the GUI event triggering thread, and the http request thread.

As a scripting language, JS’s main purpose is to interact with users and operate the DOM. This determines that it can only be single-threaded, otherwise it will cause very complex synchronization problems. (We will not study these issues here)

But single-threaded languages ​​have a very fatal certainty. If a script language is executed and a certain block of functions takes a lot of time to execute, it will cause blocking. For such a project, the user experience is very poor, so this phenomenon is not allowed to exist during the development process of the project.

In fact, JS provides us with a Worker class, which is used to solve this blocking phenomenon. When we use this class, it will apply for a new thread from the browser. This thread is used to execute a js file alone.

var worker = new Worker(js文件路径);

Then this statement will apply for a thread to execute the js file.

Of course, there are some methods in the main thread to control the new thread and receive data. Here, we only talk about a few of the more commonly used methods.

//postMessage(msg);
//postMessage方法把在新线程执行的结果发送到浏览器的js引擎线程里
worker.onmessage = function(){
    //获取在新线程中执行的js文件发送的数据 用event.data接收数据
    console.log( event.data )
};
setTimeout( function(){
    worker.terminate();
    //terminate方法用于关闭worker线程
},2000)

setTimeout( function(){
    worker = new Worker("js/test22.js");
    //再次开启worker线程
},3000)

Use the postMessage() method in a new thread to send some data to the main thread. The main thread uses the worker's onmessage event to receive the data, thus realizing multi-threaded execution and multi-threading of js. transfer of data between.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to implement multi-threading in javascript. For more information, please follow other related articles on the PHP Chinese website!