The use of single-threaded JS and multi-threaded browsers

This time I will bring you the use of single-threaded JS and multi-threaded browsers. What are the precautions for the use of single-threaded JS and multi-threaded browsers. The following is a practical case. Let’s take a look. one time.

The JS language is single-threaded. The browser only assigns one main thread to js to execute tasks (functions), but only one task can be executed at a time. These tasks form a task queue and are queued for execution.

The browser is multi-threaded

Some front-end tasks are very time-consuming, such as network requests, Timers and event monitoring, if they are allowed to interact with others If the tasks are all the same and queued up to wait for execution, the execution efficiency will be very low and even cause the page to freeze. Therefore, browsers that are multi-threaded, such as Webkit or Gecko engines, may have the following threads:

javascriptEngine thread

http request thread

Interface rendering thread

Browser event trigger thread

JS single thread and Ajax asynchronous

Since JS is said to run in a single thread, why does XMLHttpRequest after connection Asynchronous? This is requested by the browser to open a new thread. When the requested status changes, if a callback has been set previously, the asynchronous thread will generate a status change event and put it in the Event Processing queue of the JavaScript engine to wait for processing. When the browser is idle, the dequeued task is processed, and the JavaScript engine always runs in a single thread Callback function. The JavaScript engine is indeed a single-threaded task queue that can be understood to be a queue composed of ordinary functions and callback functions.
That is, the Ajax request is indeed asynchronous. This is a new thread request opened by the browser. When the event is called back, it is put into the Event loop single-threaded event queue to wait for processing.

JS event loop mechanism (Event loop)

Javascript has a main thread main process and call-stack (a call stack). When processing tasks in a call stack, other All have to wait. When some asynchronous operations such as setTimeout are encountered during execution, they will be handed over to other modules of the browser (taking webkit as an example, the webcore module) for processing. When the delayed execution time specified by setTimeout is reached, The task (callback function) will be put into the task queue. Generally, the callback functions of different asynchronous tasks will be placed in different task queues. After all tasks in the call stack have been executed, then execute the tasks (callback functions) in the task queue.

In the above figure, when DOM operations, ajax requests, setTimeout and other WebAPIs are encountered in the call stack, they will be handed over to other modules of the browser kernel for processing. In addition to the Javasctipt execution engine, the webkit kernel has An important module is the webcore module. For the three APIs mentioned by WebAPIs in the figure, webcore provides DOM Binding, network, and timer modules respectively to handle the underlying implementation. When these modules finish processing these operations, put the callback function into the task queue, and then wait for the tasks in the stack to be executed before executing the callback function in the task queue.

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:

Some minor issues about type conversion in js

Implicit type conversion in JS

The above is the detailed content of The use of single-threaded JS and multi-threaded browsers. For more information, please follow other related articles on the PHP Chinese website!