解析浏览器中的 Event-Loop 机制

前言

Event-Loop 机制想必大家都有所耳闻，今天我就带大家来了解一下浏览器中的 Event-Loop 机制。

函数调用栈

函数调用栈是个干活的地方，它会真刀真枪地给你执行任务。

需要被执行的逻辑，它首先需要被推入函数调用栈，后续才能被执行。

宏任务（macro-task)队列

宏任务主要包含：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)；

微任务(micro-task)队列

微任务主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境)；

Event Loop 过程

一个完整的 Event Loop 过程，可以概括为以下阶段：

执行并出队一个宏任务：

注意如果是初始状态：调用栈空。微任务队列空，宏任务队列里有且只有一个 script 脚本（整体代码）。这时首先执行并出队的就是 script 脚本；

全局上下文（script 标签）被推入调用栈，同步代码执行：

在执行的过程中，可以产生新的宏任务队列 与 微任务队列，它们会分别被推入各自的任务队列里。

上一步我们出队的是一个宏任务队列，这一步我们处理的是 微任务队列。但需要注意的是：当宏任务队列出队时，任务是一个一个执行的；而 微任务队列 出队时，任务是一队一队执行的。因此，我们处理微任务队列这一步，会逐个执行队列中的任务并把它出队，直到队列被清空；

执行渲染操作，更新界面；

检查是否存在 Web worker 任务，如果有，则对其进行处理。

总结

结语