浏览器中 JS 的事件循环机制

目录

• 事件循环机制
• 宏任务与微任务
• 实例分析
• 参考

1.事件循环机制

浏览器执行JS代码大致可以分为三个步骤，而这三个步骤的往复构成了JS的事件循环机制（如图）。

第一步：主线程（JS引擎线程）中执行JS整体代码或回调函数（也就是宏任务），执行过程中会将对象存储到堆（heap）中，将函数的参数和局部变量加入到栈（stack）中，执行完毕后会释放堆或退出栈。执行完这个宏任务后，会判断微任务队列（microtask queue）是否为空，如果不为空，则会将所有的微任务依次取出并执行。如果在这个过程中触发了任何 Web APIs 将进行第二步操作。

第二步：调用 Web API，并在合适的时候将回调函数加入到事件回调队列（event queue）中。比如执行了setTimeout(callback1, 1000)，会创建一个计时器，并且在另一个线程（浏览器定时触发线程）里面监听计时器是否过期，等到计时器过期后，会将对应回调 callback1加入事件回调队列中。

第三步：等到第一步中的微任务执行完毕之后，会判断事件回调队列（event queue）是否为空。如果不为空，则会取出并执行最先进入队列的回调函数，执行过程如同第一步。如果为空，则会视情况进行等待或挂起主线程。

补充说明：浏览器的内核是多线程的，常驻线程有浏览器 GUI 渲染线程、JavaScript 引擎线程、浏览器定时触发器线程、浏览器事件触发线程、浏览器 http 异步请求线程。

2.宏任务与微任务

宏任务（macrotask）：script（整体代码）、setTimeout/setInterval、I/O、UI rendering等

微任务（microtask）：Promise、MutationObserver等

JS代码执行过程——宏任务与微任务的执行示意图：

如图，可以看出JS执行过程中，是先执行一个宏任务，再执行这个宏任务产生的对应微任务，执行完毕后，再执行后面的宏任务，以此往复。

3.实例分析

使用浏览器：Chrome Version 80.0.3987.163

第一组：

比较 setTimeout 与 Promise

console.log('start')

setTimeout(() => {
  console.log('setTimeout')
}, 0);

Promise.resolve().then(() => {
  console.log('microtask: promise')
})

console.log('end')

结果：

分析：

以JS的事件循环机制来分析。首先，script（整体代码）算是一个宏任务，执行完毕，会先后输出"start"和"end"，然后执行这个过程中产生的微任务，即promis.then中的回调，输出"microtask: promise"；这个过程中也调用了 Web API 中的 setTimeout，会创建一个计时器，过期后将回调添加到事件回调队列中；然后再执行回调（第二个宏任务），输出"setTimeout"。与浏览器运行输出一致，符合预期。

第二组：

宏任务与微任务的执行顺序对比

function func1() {
  console.log('func1')
  Promise.resolve().then(() => {
    console.log('microtask.promise1')
  })
}

function func2() {
  console.log('func2')
  Promise.resolve().then(() => {
    console.log('microtask.promise2')
  })
}

function main() {
  func1()
  func2()
  setTimeout(func1, 0);
  setTimeout(func2, 0);
}

main()

结果：

分析：

从输出结果可以看出，当一个宏任务执行完毕后，会接着执行相应的所有微任务，执行完毕后，再执行后续的宏任务，并以往复，与预期相符。

4.参考

并发模型与事件循环

Javascript event loop

JavaScript Event Loop Explained

HTML系列：macrotask和microtask

【翻译】Promises/A+规范