JS | Event Loop 事件循环

Posted 2021-04-30 cnjs

Event Loop 事件循环

不太完善的认知，事件循环涉及两种任务：Macro 宏观任务、Micro 微观任务

Event Loop 运行时，先执行同步代码、再执行微观任务代码、最后执行宏观任务代码。

上述完成后是一个 Tick。紧接着进行下一个宏观任务，同步、微观、宏观。。。

循环上述流程，这就是事件循环 Event Loop。

同时只可以存在一个事件循环，一个 Tick。一个流程中可以包含多个任务。

多个任务总是有一个执行顺序吧，不可能随意乱执行，到处都是 bug 啊。

所以会分类，定义先后顺序

代码表示：

while(true) { // 同步、微观、宏观}

图片表示：

macrotask、microtask^[1]

---

macrotask:

•script 标签、全局作用域•setTimeout•setInterval•setImmediate (Node独有)•requestAnimationFrame (浏览器独有)•各种 I/O•UI rendering (浏览器独有)

microtask:

•process.nextTick•Promise.then 等（浏览器端）•Object.observe•mutationObserver

一个宏观任务中包含当前 tick 中多个微观任务，宏观任务中代码在微观任务代码执行完成后再执行。

一个简单的浏览器环境例子

一个复杂点的 Node 环境例子

再来看任务优先级排序：nextTick > Promise.then > setTimeout > setImmediate

References

[1] macrotask、microtask: https://www.zhihu.com/question/36972010

——— END ———

欢迎分享、关注、在看！