1. What is MacroTask?
Macro tasks include: setTimeout setInterval Ajax DOM events.
Macro tasks are initiated by the host (browser, Node). Macro tasks can be understood as each time the code executed by the execution stack is a macro task (including each time it is obtained from the event queue An event callback and put it into the execution stack for execution). Process switching is definitely a macro task because it requires a lot of resources.
2. What is MicroTask?
Microtasks include: Promise async/await, etc...
Microtasks are initiated by the JS engine. Microtasks can be understood as tasks that are executed immediately after the execution of the current task ends. That is, after the current task, before the next task, and before rendering. Thread switching is a microtask, because you only need to switch within the same process.
3. How are macro tasks and micro tasks executed?
Execution order: Main thread >> Micro tasks created on the main thread >> Macro tasks created on the main thread
In the event loop, each loop operation is called a tick. The task processing model of each tick is relatively complex, but the key steps are as follows:
(1) Execute a macro task (if not in the stack, get it from the event queue)
(2) If a microtask is encountered during execution, add it to the task queue of the microtask.
(3) After the macro task is executed, all micro tasks in the current micro task queue are executed immediately (executed in sequence)
(4) After the current macro task is executed, the rendering starts to be checked, and then the GUI thread takes over the rendering.
(5) After rendering is completed, the JS thread continues to take over and starts the next macro task (obtained from the event queue)
We can explain it better through a flow chart:
It is easy to have a wrong understanding here :
That is, microtasks are executed before macrotasks. In fact, the synchronous task is executed first. There are two types of asynchronous tasks: macro tasks and micro tasks. First, add the macro task to the macro task queue, and add the micro tasks in the macro task to the micro task queue. After all synchronous executions are completed, asynchronous execution is performed, and the asynchronous microtasks are transferred from the queue to the main thread for execution. After the microtasks are executed, the asynchronous macrotasks are transferred from the queue to the main thread for execution. It keeps looping after that...
4. Synchronous and asynchronous
1. Both are asynchronous
2. The difference between synchronous and asynchronous:
(1) Synchronous code execution: The order you write will be executed in that order. Obviously, the synchronization task is blocking, that is to say, the next sentence can only be carried out after the execution of the previous sentence is completed.
(2) Execution of asynchronous code: The common asynchronous is callback. If it is not executed in the order written, it is asynchronous. However, asynchronous does not mean non-blocking. The callback will not be executed until it is executed, which is also step by step. The downward execution is just not in the order from top to bottom of the written program, so if some tasks occupy the entire thread, the asynchronous tasks will also be blocked. This is also because JS is single-process and single-threaded.
(3) Classic JS is single-process and single-threaded. Modern JS has broken through this. We have methods to create additional processes to handle tasks together. NodeJS can also create new threads in the same process. Browsers also have to Plans to support threads
(4) In addition to callbacks, there are other types of asynchronous tasks, such as tasks. Tasks are a queue type. The tasks registered first are executed first. Tasks are divided into macro tasks and micro tasks according to the timing of execution. What is the distinction? To determine the timing of execution, you need to look at the design part.
5. Why timers and events are macro tasks
(1) Why is an event a macro task?
The triggering of events depends on the implementation of the browser. The platform has its own event registration and dispatch mechanism, such as the kernel libuv used by nodeJS. Therefore, no matter what, due to the independent registry and dispatch mechanism of events, it will not exist with JS. In one process, the event management center must be implemented in another process, then dispatch the event, which is a macro task
(2) Why is the timer task a macro task?
（1）可以把定时器和定时器任务是分离的，先把定时器想成一个时间管理中心
（2）然后在上面注册一个个任务，这些任务本身和时间无关
（3）时间管理中心和时间有关的，当时间管理中心发现时间到了，要执行任务，就从任务列表中找出注册的任务，并通知JS执行任务
（4）所以可以看到，时间管理中心（定时器的进程）和执行的任务（JS运行时）是无关的，不共享上下文，所以是宏任务
（5）控制渲染的函数如requestAnimationFrame，这个函数本身是要求在下一帧重绘前做什么，它的本身被设计成是在渲染的流程中，然后它做的事情应该也是和渲染有关的，也就是这个任务和它所处的空间的上下文一致