Js Event Loop
js 事件机制。js 是一个单线程语言,同一时间只能执行一个任务。为了非阻塞,处理方式为主线程 + 任务队列。
因此一个event loop主要流程如下:
Event Loop Start => Task Queues => Microtasks Queues => Event Loop End => UI Rendering
- 开始一个 Event loop
- 执行栈从 Tasks Queues 中取任务,并执行。
- 执行完后,执行栈清空
- 执行栈从 Microtasks Queues 中取任务执行
- 执行完成,执行栈清空
- 判断 Microtasks Queue是否还有任务,有则重复步骤3。
- Event loop 结束 (Vue nextTick 中说的拿到更新后的 DOM 就是在结束之前)
- 进入 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…