Shulou(Shulou.com)06/03 Report--

This article mainly explains "javascript how to distinguish between processes and threads", the content of the explanation is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "javascript how to distinguish between processes and threads" bar!

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.

Thread: a subset of processes that are independent. The thread runs in a shared memory space.

Browsers are multi-process. As shown below:

And each time a page is opened, a separate process is created. There is its own multithreading within the process. If the browser is single-process, then a page collapses, affecting the entire browser.

What are the processes in the browser:

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

Responsible for browser interface display and interaction with users. Such as forward, backward, etc.

Responsible for the management of each page, creating and destroying other processes

Draw the Bitmap in memory obtained by the Renderer (renderer) process to the user interface

Management and download of network resources

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

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

4. Browser rendering process (browser kernel) (Renderer (renderer), which is multithreaded internally) defaults to one process per Tab page, which does not affect each other. Main functions: page rendering, script execution, event handling, etc.

The threads contained in the browser rendering process (browser kernel):

1. GUI rendering thread

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

When the interface needs to be redrawn (Repaint) or reflow is triggered by some operation, the thread executes

Note that the GUI rendering thread and the JS engine thread are mutually exclusive, the GUI thread is suspended (equivalent to being frozen) when the JS engine executes, and the GUI update is saved in a queue until the JS engine is idle.

2. JS engine threads (

The "JavaScript engine" is often referred to as a virtual machine. Also known as the JS kernel, it is responsible for handling Javascript scripts. (for example, 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 the task in the task queue and then processing it. There is only one JS thread running the JS program in a Tab page (renderer process) at any time.

Also note that the GUI rendering thread and the JS engine thread are mutually exclusive, so if the JS takes too long, it will cause the rendering of the page to be incoherent and cause the page rendering load to be blocked.

3. Event trigger thread

Belongs to the browser rather than the JS engine to control the event loop (understandably, the JS engine itself is too busy and requires the browser to open another thread to assist)

When the JS engine executes blocks of code such as setTimeOut (or other threads from the browser kernel, such as mouse clicks, AJAX asynchronous requests, etc.), the corresponding task is added to the event thread

When the corresponding event meets the trigger condition, the thread adds the event to the end of the queue to be processed, waiting for the JS engine to process it.

Note that due to the single-threaded nature of JS, events in these waiting queues have to be queued for processing by the JS engine (executed only when the JS engine is idle)

4. Timing trigger thread

The legendary thread of setInterval and setTimeout

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 timing)

So timing is timed and triggered by a separate thread (after timing, add it to the event queue and wait for the JS engine to be idle)

Note that the W3C specifies in the HTML standard that intervals below 4ms in the setTimeout are counted as 4ms.

5. Asynchronous http request thread

After XMLHttpRequest connects, a new thread request is opened through the browser.

When a state change is detected, if a callback function is set, the asynchronous thread generates a state change event and puts the callback into the event queue. And then executed by the JavaScript engine.

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

Because JavaScript can manipulate DOM, if you modify these element attributes and render the interface at the same time (that is, the JS thread and UI thread run at the same time), the element data obtained before and after the rendering thread may be inconsistent. Therefore, in order to prevent unexpected results in rendering, the browser sets the relationship between the GUI rendering thread and the JS engine to be mutually exclusive. When the JS engine executes, the GUI thread is suspended and the GUI update is saved in a queue until the JS engine thread is idle.

Js execution mechanism: js is single-threaded, pushing the function into the stack whenever the function is executed, but if there is an asynchronous operation, let the browser thread (webAPI) handle it, and put it into the task queue after processing. When the main thread (execution stack) finishes execution, if there is a task in the task queue, it executes.

This is why the following code outputs b first, then a. The function of settimeout is put in the task queue, and console.log ('b') is the main thread.

SetTimeout (()) = > {console.log ('a');}, 0); console.log ('b'); Thank you for reading, the above is the content of "how javascript distinguishes processes and threads". After the study of this article, I believe you have a deeper understanding of how javascript distinguishes processes and threads, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.