正文

JS事件循环，MACRO TASK，MICRO TASK

IP云
IP云V管理员/7 阅读
08/17
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

事件循环的基本概念

  • JS执行的过程中，由JS引擎控制的函数调用栈来控制时间循环
  • 定时器线程，事件触发线程，异步http请求线程控制异步的任务队列
  • 任务分为macro task，micro task 对应都有不同的任务队列
    • macro task：script正常代码，setTimeout，setInterval，I/O，UI rendering
      • 由事件触发线程维护
    • micro task：process.nextTick，promise，mutationObserve 
      • 由JS引擎线程维护
    • 最终在函数调用栈中完成

事件循环执行的顺序

  • 执行函数调用栈中的macro task，直到调用栈清空（剩下全局）
  • 执行job queues中所有可执行的micro tasks
  • 执行UI render
  • 从事件队列中获取macro task，开始新的事件循环

例子

<div class="outer" style="width:200px;height:200px;background-color: #ccc">
1
<div class="inner" style="width:100px;height:100px;background-color: #ddd">begin</div>
</div>

// Let's get hold of those elements
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');var i = 0;// Let's listen for attribute changes on the
// outer element
new MutationObserver(function() {
console.log('mutate');
}).observe(outer, {
attributes: true
});// Here's a click listener…
function onClick() {
i++; if(i === 1) {
inner.innerHTML = 'end';
} console.log('click'); setTimeout(function() {
alert('锚点');
console.log('timeout');
}, 0); Promise.resolve().then(function() {
console.log('promise');
}); outer.setAttribute('data-random', Math.random());
}// …which we'll attach to both elements
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);

当我们点击 inner div 时程序依次的执行顺序是：

  1. onclick 入 JS stack
  2. 打印出 click
  3. 将 timeout 压入到 macrotask
  4. 将 promise 压入到 microtask
  5. 修改 outer 属性 data-random
  6. 将 mutate 压入到 microtask，
  7. onclick 出 JS stack

此时，由于用户点击事件onclick产生的macrotask执行完毕，JS stack 清空，开始执行microtask.

  1. promise 入 JS stack
  2. 打印出 promise
  3. promise 出 JS stack
  4. mutate 入 JS stack
  5. 打印出 mutate
  6. mutate 出 JS stack

此时，microtask 执行完毕，JS stack 清空，但是由于事件冒泡，接着执行outer上的onclick事件.

  1. onclick 入 JS stack
  2. 打印出 click
  3. 将 timeout 压入到 macrotask
  4. 将 promise 压入到 microtask
  5. 修改 outer 属性 data-random
  6. 将 mutate 压入到 microtask，
  7. onclick 出 JS stack

此时，由于outer上的onclick事件产生的macrotask执行完毕，JS stack 清空，开始执行microtask.

  1. promise 入 JS stack
  2. 打印出 promise
  3. promise 出 JS stack
  4. mutate 入 JS stack
  5. 打印出 mutate
  6. mutate 出 JS stack

此时，本轮事件循环结束，UI 开始 render.

  1. 页面中inner的innerHTML变为end

此时，UI render 完毕，开始下一轮事件循环.

  1. timeout 入 JS stack
  2. 弹出警告 锚点.
  3. 打印出 timeout
  4. timeout 出 JS stack
  5. timeout 入 JS stack
  6. 弹出警告 锚点.
  7. 打印出 timeout
  8. timeout 出 JS stack

到此为止，整个事件执行完毕，我们可以看到在弹出警告框之前inner的内容已经改变。

那如果不是用户点击事件触发onclick，而是js触发呢？

inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);
inner.click();

此时的执行顺序是：

  1. 首先是script(整体代码)入 JS stack
  2. onclick 入 JS stack
  3. 打印出 click
  4. 将 timeout 压入到 macrotask
  5. 将 promise 压入到 microtask
  6. 修改 outer 属性 data-random
  7. 将 mutate 压入到 microtask，
  8. onclick 出 JS stack

此时，inner 的 onclick 已经出 JS stack，但是script(整体代码)还没有出 JS stack，还不能执行microtask，由于冒泡，接着执行 outer 的 onclick.

  1. onclick 入 JS stack
  2. 打印出 click
  3. 将 timeout 压入到 macrotask
  4. 将 promise 压入到 microtask
  5. 修改 outer 属性 data-random

接着执行的outer.setAttribute('data-random', Math.random());，但是由于上一个mutation microtask还处于等待状态，不能再添加mutation microtask，所以这里不会将 mutate 压入到 microtask。接着执行：

  1. onclick 出 JS stack
  2. script(整体代码)出 JS stack

此时，inner.click()执行完毕，script(整体代码)已出 JS stack，JS stack 清空，开始执行mircotask.

  1. promise 入 JS stack
  2. 打印出 promise
  3. promise 出 JS stack
  4. mutate 入 JS stack
  5. 打印出 mutate
  6. mutate 出 JS stack
  7. promise 入 JS stack
  8. 打印出 promise
  9. promise 出 JS stack

此时，所有的mircotask执行完毕，本轮事件循环结束，UI 开始 render.

  1. 页面中inner的innerHTML变为end

此时，UI render 完毕，开始下一轮事件循环.

  1. timeout 入 JS stack
  2. 弹出警告 锚点.
  3. 打印出 timeout
  4. timeout 出 JS stack
  5. timeout 入 JS stack
  6. 弹出警告 锚点.
  7. 打印出 timeout
  8. timeout 出 JS stack

到此为止，整个事件执行完毕，我们可以看到在弹出警告框之前inner的内容已经改变。

参考文献：

https://segmentfault.com/a/1190000013212944

http://zhangxiang958.github.io/2018/02/03/Event%20Loop%20中的%20microtask%20与%20macrotask/