foreword
The event loop can be said to be a necessary question to test the basic skills of the front-end, and it also appears frequently in interviews. Whether it's html, css or js, they all run on the browser, so to clarify the event loop, the browser is essential. Next, let's talk about the event loop starting from the browser.
The browser's process model
What is a process?
Program operation requires a dedicated memory space, and this content space can be understood as a process
As shown above, each application has at least one process, and they are independent of each other
What are threads?
After having a process, there will be a memory space independent of the program, and the program can be run, and this program can be called a thread. After the program is started, a thread will be created to run the code, and the thread can be called Main thread, if the program needs to execute multiple blocks of code at the same time, the main thread will start more threads to execute, so a process can contain multiple threads.
So what processes and threads does the browser have?
The browser is a multi-process and multi-threaded application , and its internal work is extremely complicated. In order to avoid mutual influence, when the browser is started, multiple processes will be started. The main processes are:
Browser process:
Mainly responsible for interface display (this interface display refers to the display of the navigation bar, etc., not the display of page content), user interaction , sub-process management , etc. Multiple threads will be started internally to handle different tasks
Network process:
Responsible for loading network resources, multiple threads will be started internally to handle different network tasks.
Rendering process (emphasis):
After the rendering process starts, a rendering main thread will be started , which is responsible for executing HTML, CSS, and JS codes.
In the browser, every time a new tab is opened, a new rendering process will be started , which has ensured that different tabs will not affect each other.
So how to check the browser process, take Chrome as an example, click the three dots in the upper right corner--"More Tools--"Task Manager, you can see the main processes mentioned above
How does the rendering main thread work?
Next comes the focus of this article, rendering the main thread, which is the busiest thread in the browser, and what it needs to deal with includes but is not limited to:
- parsing HTML
- parsing CSS
- computed property
- layout
- Execute global JS
- Execute event function
- Execute counter callback function
- ......
To handle so many tasks, the main thread has encountered a big trouble, how to schedule these tasks? A function is being executed, and the user clicks at this time, should I immediately execute the processing function of the click event? At this time, the timer has just reached the time, what should I do? …
In order to solve this problem, the solution given by the rendering main process is queuing . Yes, since you have so many things to do, then queuing up, queuing up one by one, where to line up, it is called dequeue in Google , W3C calls it an event queue. In fact, it just takes a different name. It is actually one thing, as follows
- When our program starts, the main renderer process enters an infinite loop .
- In each cycle, it will check whether there are still tasks in the message queue. If there is, the first task will be taken out and executed and enter the next cycle. If not, the rendering main thread will enter a dormant state .
- Other threads can add tasks to the message queue at any time, and new tasks will be added to the end of the message queue . When adding new tasks, if the main thread is in a dormant state, it will wake up the main thread to obtain tasks in a loop .
This whole process is called the event loop (message loop)
JS asynchronous
Now that we have a basic understanding of the event loop, let's go further in combination with JS. During the code running, we will encounter tasks that cannot be executed immediately, such as:
- Tasks after timing complete -- setTimeout, setInterval...
- The task after the network communication is completed -- XHR...
- Tasks after user interaction -- tap, swipe...
At this time, if the rendering main process waits for these task opportunities, it will cause the main thread to be blocked, causing the browser to freeze.
In order to prevent the rendering main thread from being blocked, the browser chooses an asynchronous method to solve the problem. The specific execution sequence is as follows:
Interview question: Tell me about your understanding of JS asynchrony?
Reference answer: JS is a single-threaded language, because it runs on the main rendering thread of the browser, and there is only one main rendering thread . The rendering main thread undertakes many tasks, rendering pages and executing JS are all running in it. If you use a synchronous method, it is very likely that the main thread will be blocked, which will cause many other tasks in the message queue to be unable to be executed. In this way, on the one hand, the busy main thread will waste time in vain, and on the other hand, the page cannot be updated in time, causing the user to be stuck. So the browser uses an asynchronous way to avoid it. The specific method is that when certain tasks occur, such as timers, networks, and event monitoring, the main thread will hand over the tasks to other threads for processing, and immediately end the execution of the tasks by itself, and then execute subsequent codes. When other threads are finished, wrap the callback function passed in advance into a task, add it to the end of the message queue, and wait for the main thread to schedule execution. In this asynchronous mode, the browser never blocks, thus ensuring the smooth operation of the single thread to the greatest extent.
Does the task have priority, and what standard does the browser perform according to?
In fact, tasks have no priority. In the message queue, they are all first-in, first-out, but the message queue has priority. What does this mean? The latest explanation from W3C is as follows:
Each task has a task type, tasks of the same type must be in one queue, and tasks of different types can belong to different queues. In an event cycle, the browser can fetch tasks from different queues for execution according to the actual situation.
The browser must prepare a micro-queue, and the tasks in the micro-queue are executed before all other tasks.
Seeing this, some friends may be confused. Didn’t they all say macro queues and micro queues (macro tasks, micro tasks)?
In fact, with the rapid increase in the complexity of browsers, W3C no longer uses the term macro queue , and replaced it with a more flexible and changeable processing method ( interviewers who do not usually pay attention to this aspect may not know this point, Good bonus points, remember! ), in the current implementation of chrome, at least the following queues are included:
Micro-queue: the user stores the tasks that need to be executed the fastest, and the priority is "highest"
Interaction queue: used to store event processing tasks generated after user operations, with a priority of "high"
Delay queue: used to store callback tasks after the timer arrives, with priority "medium"
Let's look at a simple example:
setTimeout(function () {
console.log(1);
}, 0);
Promise.resolve().then(function () {
console.log(2);
});
console.log(3);How does the above code work in the browser?
① The rendering main thread executes the global js, puts setTimeout into the delay queue, puts the promise into the micro queue, and executes console.log(3).
②The main process obtains tasks cyclically. Since the micro-queue has the highest priority, the promise task is executed as the main thread.
③The main thread loops again. At this time, since there are no tasks in the micro-queue, the tasks are obtained from the delay queue and executed by the main thread.
So the print result is 3 2 1
Interview question: Talk about your understanding of the event loop of JS
Reference answer: The event loop, also known as the message loop, is the way the browser renders the main thread. In the source code of Chrome, it starts an endless for loop, each loop fetches the first task from the message queue for execution, and other threads only need to add the task to the end of the queue at an appropriate time. In the past, message queues were simply divided into macro queues and micro queues. This statement can no longer satisfy the complex browser environment, and a more flexible and changeable processing method has been replaced. According to the official W3C explanation, each task has a different type, tasks of the same type must be in the same queue, and different tasks can belong to different queues. Different task queues have different priorities. In an event loop, the browser decides which queue to take. But the browser must have a micro-queue, and the tasks of the micro-queue must have the highest priority, and must be scheduled and executed first.