Micro Task / Macro Task (Task)

Js Event Loop

js 事件机制。js 是一个单线程语言，同一时间只能执行一个任务。为了非阻塞，处理方式为主线程 + 任务队列。

因此一个event loop主要流程如下:

Event Loop Start => Task Queues => Microtasks Queues => Event Loop End => UI Rendering

1. 开始一个 Event loop
2. 执行栈从 Tasks Queues 中取任务，并执行。
3. 执行完后，执行栈清空
4. 执行栈从 Microtasks Queues 中取任务执行
5. 执行完成，执行栈清空
6. 判断 Microtasks Queue是否还有任务，有则重复步骤3。
7. Event loop 结束 (Vue nextTick 中说的拿到更新后的 DOM 就是在结束之前)
8. 进入 Update the rendering（更新渲染）阶段

Micro Task 微任务

当前 Event Loop 末尾执行

包含 process.nextTick (Node), Promise, MutationObserver

Macro Task (Task) 宏任务

下一个 Event Loop 开始时执行

setTimeout, setInterval, setImmediate (Node), I/O, postMessage，MessageChanel

MessageChanel 可以参考张鑫旭老师的文章：www.zhangxinxu.com/wordpress/2…