浏览器中的事件循环机制

概念

• “事件循环机制” 是浏览器或 Node.js 对于主线程的调度方式，主线程寻找任务并执行的过程就是事件循环。

• 浏览器主线程 = “JS 主线程” 与 “UI 渲染线程” 互斥

JS 执行过程

1. 页面中每个 <script> 标签是一个宏任务。渲染线程遇到 <script> 标签时，会把其代码加入宏任务队列。
2. JS 引擎取出第一个宏任务，在主线程中解析代码，并运行。
   • 遇到同步代码，立即执行。
   • 遇到异步代码：
     • 如果是宏任务（比如 I/O、定时器等），放入其他线程中处理，其回调加入宏任务队列；
     • 如果是微任务，其回调加入微任务队列。
3. 当前宏任务执行完成，处理并清空微任务队列。
4. 渲染线程绘制页面。
5. 浏览器从宏任务队列中取出任务，从第 2 步开始重复上述过程。

微任务与宏任务

• 微任务常见情况有：process.nextTick() (Node 独有)、Promise、MutationObserver。
• 宏任务常见情况有：setTimeout()、setInterval()、setImmediate() (Node 独有)、requestAnimationFrame() (浏览器独有)、I/O、UI 渲染 (浏览器独有) 等。