A brief discussion on javascript execution mechanism

js is single-threaded, why can it perform asynchronous operations?

This comes down to the fact that the browser (the host environment of js) makes js have asynchronous attributes in some way.

Distinguish between processes and threads:

Process: a running application. Each process has its own independent memory space. For example: an open browser is a process.

Threads: A subset of processes that are independent. Threads run in shared memory space.

The browser is multi-process. As shown below:

#And every time a page is opened, an independent process is created. The process has its own multithreading. If the browser is a single process, then if a certain page crashes, it will affect the entire browser.

What processes does the browser have:

1. Browser: the main process of the browser (responsible for coordination and control) There is only one, and its functions are:

• Responsible for browser interface display and user interaction. Such as forward, backward, etc.

• Responsible for the management of each page, creation and destruction of other processes

• Draw the Bitmap in the memory obtained by the Renderer process to the user interface

• Management of network resources, downloads, etc.

2. Third-party plug-in process: Each type of plug-in corresponds to a process, which is only created when the plug-in is used

3 , GPU process: at most one, used for 3D drawing, etc.

4, Browser rendering process (browser kernel) (Renderer (renderer), is internally multi-threaded ) By default, each Tab page has one process and does not affect each other. Main functions: page rendering, script execution, event processing, etc.

Threads included in the browser rendering process (browser kernel):

1 , GUI rendering thread

• Responsible for rendering the browser interface, parsing HTML, CSS, building DOM tree and RenderObject tree, layout and drawing, etc.

• When the interface needs to be repainted (Repaint) or a reflow is caused by some operation, this thread will execute

• Note that the GUI rendering thread has nothing to do with the JS engine Threads are mutually exclusive. When the JS engine is executed, the GUI thread will be suspended (equivalent to being frozen). GUI updates will be saved in a queue and will be executed immediately when the JS engine is idle.

2. JS engine thread (

"JavaScript engine" is usually called a virtual machine. Also known as the JS kernel, it is responsible for processing Javascript script programs. (such as V8 engine)

• The JS engine thread is responsible for parsing Javascript scripts and running code.

• The JS engine has been waiting for the arrival of tasks in the task queue, and then processes them. Whenever a Tab page (renderer process) There is only one JS thread running the JS program

• Also note that the GUI rendering thread and the JS engine thread are mutually exclusive, so if the JS execution time is too long, it will cause the rendering of the page to be inconsistent. Causes page rendering and loading to be blocked.

3. Event trigger thread

• Belongs to the browser rather than the JS engine, and is used to control the event loop (it is understandable that the JS engine itself is too busy, The browser needs to open another thread to assist)

• When the JS engine executes a code block such as setTimeOut (it can also come from other threads in the browser kernel, such as mouse clicks, AJAX asynchronous requests, etc.), the corresponding task will be added To the event thread

• When the corresponding event meets the triggering conditions and is triggered, the thread will add the event to the end of the pending queue and wait for processing by the JS engine

• Note, Due to the single-threaded relationship of JS, the events in the pending queue have to be queued to wait for processing by the JS engine (will be executed when the JS engine is idle)

4. Timing trigger thread

• The thread where the legendary setInterval and setTimeout are located

• The browser timing counter is not counted by the JavaScript engine (because the JavaScript engine is single-threaded, if it is in a blocked thread state, it will affect the accuracy of the timing) )

• Therefore, a separate thread is used to time and trigger the timing (after the timing is completed, it is added to the event queue and waits for the JS engine to be idle before execution)

• Note that W3C stipulates in the HTML standard , the regulations require that the time interval below 4ms in setTimeout is counted as 4ms.

5. Asynchronous http request thread

• After XMLHttpRequest is connected, a new thread request is opened through the browser

• When a state change is detected, if a callback function is set, the asynchronous thread will generate a state change event and put the callback into the event queue. Then executed by the JavaScript engine.

The GUI rendering thread and the JS engine thread are mutually exclusive:

Since JavaScript can manipulate the DOM, if you modify the attributes of these elements and render them at the same time interface (that is, the JS thread and the UI thread run at the same time), then the element data obtained before and after the rendering thread may be inconsistent. Therefore, in order to prevent unexpected rendering results, the browser sets the GUI rendering thread and the JS engine to have a mutually exclusive relationship. When the JS engine is executed, the GUI thread will be suspended, and GUI updates will be saved in a queue until the JS engine It is executed immediately when the thread is idle.

js execution mechanism: js is single-threaded. Whenever a function is executed, the function is pushed onto the stack. However, if there is an asynchronous operation, the browser thread (webAPI) will process it, and then put it into the task after processing. In the queue, when the main thread (execution stack) completes execution, if there is a task in the task queue, it will be executed.

This is why the following code will output b first, then a. The settimeout function will be placed in the task queue, and console.log('b') is the main thread.

setTimeout(() => {
   console.log('a');
}, 0);
console.log('b');

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of A brief discussion on javascript execution mechanism. For more information, please follow other related articles on the PHP Chinese website!