In-depth analysis of the event execution mechanism in JS

How to quickly get started with VUE3.0:

I was a little confused when I started studying a written test question some time ago. Today we will thoroughly analyze the event execution mechanism of JS.

Let’s look at a piece of code first

. Friends, you can try to write out the printing order.

Single-threaded

JS is mainly used as the scripting language of the browser. The main purpose of Js is to operate the DOM, which determines that JS must be single-threaded. If JS is multi-threaded like Java, and if two threads operate the DOM at the same time, then the browser should How to implement it?

The release of JS is actually to take advantage of the popularity of Java. The language was written not long ago, so this is why JS is single-threaded

JS execution mechanism

Since JS is single-threaded, tasks must be sorted. All tasks will be executed according to a rule.

• Synchronous tasks

• Asynchronous tasks

Synchronous tasks and asynchronous tasks enter the execution stack. JS will first determine that the type of the task

• is a synchronous task. If it enters the main thread directly,

• it is an asynchronous task. Enter Event Table and register the callback function Event Queue .

• After all synchronous tasks are executed, JS will enter Event Queue . The reading function

• executes this process repeatedly until all tasks are completed. This is how we often say that事件循环

JS determines that the execution stack is empty

emmmmm, I don’t know. . . . JS should have its own unique logic to determine whether the execution stack is empty.

Asynchronous tasks

The asynchronous task execution sequence is: Macro tasks -> Micro tasks

Asynchronous tasks can be divided into

• macro tasks

• Micro tasks

Common macro tasks

• I/0

• setTimeout

• setInterval

Common micro tasks

• Promise

• .then

• .catch

Answer

vite A plug-in configured before , there is some problem with the version, please ignore this red alarm.

The analysis

• 开始了with a synchronous task. It first enters the execution stack

• to execute task() function. a is a synchronous task. Entering the execution stack

• async/await is the process of asynchronous to synchronous. The first line of code will be executed synchronously. The following The code will be asynchronous. b enters the execution stack as a synchronous task,

• a end becomes the microtask of the asynchronous task, and enters the execution stack.

So far, the synchronous task queue has开始了, a , b

So far, the asynchronous task queue has started macro tasks: setTimeout Microtask: a end

If there is no subsequent code, the printing sequence is as follows

So here comes the question, doesn’t it mean that macro tasks will be executed earlier than micro tasks? Why is setTimeout printed after a end ?

看这张图

setTimeout enters the task queue as a macro task. So the reason for this

is generally speaking:

async await leads to the generation of micro tasks, but this micro task belongs to the current macro task. Therefore, a end will be executed first, and after execution, it will be judged that the current macro task has ended. Execute the next macro task, print out setTimeout

and continue the process

• c Due to the conversion of Promise, it becomes a synchronous task and enters the task queue.

• c end enters the task queue as a micro task derived from Promise.

• d enters the task queue as a synchronous task.

So far, synchronization Task queue

• a

• b

• c

• d

so far, asynchronous task queue

• a end microtask

• c end microtask

• setTimeout macrotask

so the printing order is as follows

Postscript:

My understanding of the JS execution mechanism may be somewhat incorrect, and I hope you guys can point it out.

[Recommended related video tutorials: web front-end]

The above is an in-depth analysis of the details of the event execution mechanism in JS. For more information, please pay attention to other related articles on the PHP Chinese website!