[browser] browser process

Time:2022-5-14

I was asked before how to handle asynchronous requests if the JS engine is single threaded; Later I found myself rightBrowser process and threadThis one, I still didn’t hold it
So make a note of what’s added and consolidated

[browser] browser process

Browsers are mainly divided intoFour processes

  • Main process

Responsible for the display and interaction of browser interface, the management of each page, and the creation and destruction of other processes.

  • Third party plug-in process

Each type of plug-in corresponds to a process. It will be created only when the current plug-in is used

  • GPU process

There is only one at most for 3D painting

  • Rendering process (a process we often focus on)

The browser rendering process is also the browser kernel, which is multithreaded internally. Mainly responsible for page rendering, script execution, event processing, etc

Back to the original question,
Q:How does a single threaded JS handle asynchronous requests?
A:The rendering process of the browser isMultithreadingYes, yesJS engine thread, there are also special asynchronous request processing threads.

It is mainly divided into the following threads:

1. JS engine thread

Mutually exclusive with GUI; Execute the JS script. The GUI thread will be executed only when the task queue is empty

2. GUI (graphical user interface) rendering thread

It is mutually exclusive with JS engine. If the execution time of JS script is too long, it will lead to page rendering blocking and rendering interruption

3. HTTP asynchronous processing thread

After XMLHttpRequest is connected, some asynchronous callbacks are added to the tail queue of JS thread

4. Timer processing thread

Add the tasks to be executed at the end of timing (the thread where setTimeout and setinterval are located) to the JS thread

5. Event trigger thread

Event methods triggered by user clicks and other actions will be placed at the end of the JS queue

Related common knowledge points

Common macro tasks:

  • setTimeout
  • setInterval
  • Script script
  • I / O operation
  • UI rendering

Common micro tasks:

  • new promise. Method body after then
  • mutation observer