Macro task, micro task and event cycle mechanism

Macro task 、 Micro task and Event cycle mechanism

---

JavaScript It's single threaded , in other words , At the same time ,JavaScript Only one task can be performed , Other tasks can only wait .

that , Why? JavaScript It's single threaded ？

js It is a script language running in the browser , Because it often involves operation dom, If it's multithreaded , That means , At the same time , Ability to perform multiple tasks .

Just imagine , If a thread modifies dom, Another thread deletes dom, Then the browser doesn't know which operation to perform first .

therefore js The implementation will follow One task, one task .

Why should tasks be divided into synchronous tasks and asynchronous tasks

Just imagine , If js All tasks are synchronized , So when you encounter a timer 、 The type of network delay required to execute the task ？

page May be paralyzed , need It takes a long time to pause and wait for these To execute the completed code

therefore , Asynchronous tasks are introduced .

• Synchronization task ： The synchronization task does not need to wait, and the execution result can be seen immediately , such as console
• Asynchronous task ： Asynchronous tasks need to wait for a certain time to see the results , such as setTimeout 、 Network request

---

The event loop （Event Loop）

The of event loop is relatively simple , It is one in “JavaScript The engine is waiting for the task ”," Perform tasks " and " Go to sleep and wait for more tasks " An infinite loop of transitions between these States .

The general algorithm of the engine ：

1. When there are tasks ： Start with the first task to enter .
2. No other tasks , Sleep until the task appears , Then go to page 1 Step .

---

Task queue

According to the specification , The event loop is coordinated through the mechanism of task queue . One Event Loop in , There can be one or more task queues (task queue), A task queue is a series of orderly tasks (task) Set ; Each task has a task source (task source), From the same task source task Must be placed in the same task queue , From different sources are added to different queues .setTimeout/Promise etc. API Is the task source .

In the event loop , The key steps for each cycle are as follows ：

• In this cycle, select the task that enters the queue first (oldest task), If so, execute ( once )
• Check for presence Micro task （Microtasks）, If it exists, it will continue to execute , Until emptied Micro task queue （Microtasks Queue）
• to update render（DOM Rendering ）
• The above is a cycle , The main thread repeats the above steps

On the basis of the above cycle, we need to know a few points ：

• JS It is divided into synchronous task and asynchronous task
• Synchronization tasks are performed on the main thread , Form an execution stack
• Outside the main thread , The hosting environment manages a task queue , As long as asynchronous tasks have run results , Just put an event in the task queue .
• Once all synchronization tasks in the execution stack are completed （ here JS Engine idle ）, The system will read the task queue , Add a runnable asynchronous task to the executable stack , Start execution .

---

Macro task

(macro)task, It can be understood that the code executed by each stack is a macro task （ It includes getting an event callback from the event queue and putting it into the execution stack to execute ）.

Mission （ Code ）	Macro task	Environmental Science
script	Macro task	browser
event	Macro task	browser
Network request （Ajax）	Macro task	browser
setTimeout() Timer	Macro task	browser / Node
fs.readFile() Read the file	Macro task	Node

---

Micro task

Micro task （microtask） Is part of a macro task , Its execution time is after synchronous code execution , Before the next macro task .

Promise.then

---

Operating mechanism

In the event loop , Each cycle is called tick, every time tick The task processing model of is more complex , But the key steps are as follows ：

• Perform a macro task （ Get from the event queue without in the execution stack ）
• If micro tasks are encountered during execution , Just add it to the task queue of the micro task
• After the synchronization code in the macro task is executed , Execute all the micro tasks in the current micro task queue immediately （ Execute sequentially ）
• The current macro task is finished , Start checking the rendering , then GUI Threads take over rendering
• After rendering ,JS Thread continues to take over , Start the next macro task （ Get... From the event queue ）