JS event loop

written in front

The text here is for my own understanding

1. Browser process model

1.1 What is a process

A program needs its own dedicated memory space to run, and this memory space can be simply understood as a process. Each application has at least one process, and the processes are independent of each other. Even if they want to communicate, both parties need to agree.

1.2 What is a thread

Once you have a process, you can run the program's code. The "person" who runs the code is called a "thread".

A process has at least one thread, so after the process is started, a thread is automatically created to run the code, which is called the 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 the code, so a process can contain multiple threads.

1.3 What threads and processes does the browser have

1. JS execution engine: responsible for executing JS code
2. Rendering thread: responsible for rendering pages
3. Timer thread: responsible for timing
4. Event listening thread: responsible for listening to events
5. http network thread: responsible for network communication

2. How the rendering main thread works

1. At the very beginning, the rendering main thread will enter an infinite loop
2. Each loop checks whether there are tasks in the message queue. If there is, the first task is taken out and executed, and the next cycle is performed after execution; if not, it enters the dormant state.
3. All other threads in the host environment can add tasks to the message queue at any time. New tasks are added to the end of the message queue.

The whole process is called event loop (message loop)

task queue priority

Tasks have no priority and are first in, first out in the message queue. But message queues are prioritized. The queues in the microqueue prioritize other tasks for execution.
According to the latest W3C explanation:

• 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 take precedence over all other tasks

The main way to add tasks to the microqueue is to use: Promise, MutationObserver
such as:

// 立即把一个函数添加到微队列
   Promise.resolve().then(函数)

Event loop: first execute the code in the execution stack, find timers, event monitors, etc., and put them in the host environment.
When the countdown of the timer ends, or the event monitoring is triggered (for example: the click event triggers the click), the event will be put into the task queue to wait (if a microtask is encountered, it will be put into the microqueue). Wait until the code in the execution stack is executed. Execute the tasks of the micro-queue first, and then execute the events in the event queue in the order of first-in-coming.

interview questions

How to understand JS asynchrony

JS is a single-threaded language because it runs on the browser's main rendering thread, and there is only one rendering main 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.

Can the timer in JS achieve accurate timing? Why?

No, for the following reasons:

1. Computer hardware does not have atomic clocks, so precise timekeeping cannot be achieved
2. The timing function of the operating system itself has a small amount of deviation. Since the JS timer finally calls the function of the operating system, it also carries these deviations.
3. According to the W3C standard, when the browser implements the timer, if the nesting level exceeds 5 layers, it will have a minimum time of 4 milliseconds, which will cause a deviation when the timing time is less than 4 milliseconds
4. Affected by the event loop, the callback function of the timer can only run when the main thread is idle, so it brings a deviation