JS 事件循环 (Event Loop) 深度解析：MacroTask 与 MicroTask 的调度

嘿，各位靓仔靓女，欢迎来到今天的"JS 事件循环：MacroTask 与 MicroTask 的爱恨情仇"专场脱口秀！今天咱们不搞虚的，直接上干货，用最接地气的方式，把JS事件循环这玩意儿给扒个精光，让它在你面前再也没啥秘密可言。

开场白：别怕，Event Loop 其实没那么可怕

很多小伙伴一听到"事件循环"这几个字，脑袋就开始嗡嗡响，觉得这玩意儿深不可测，比高数还难。别慌！其实Event Loop 就是个兢兢业业的快递小哥，负责把各种任务按顺序送到CPU手上执行。你可以把它想象成一个特别特别有耐心的调度员，安排着JavaScript代码井然有序地执行。只要掌握了它的工作流程，你就能轻松驾驭异步编程，写出高效流畅的代码。

第一幕：什么是 Event Loop？

Event Loop，顾名思义，就是一个不断循环运行的机制。它主要负责两件事：

监听调用栈(Call Stack)是否为空： 调用栈是JS引擎执行代码的地方。如果调用栈空了，说明当前没有正在执行的代码。
从任务队列(Task Queue)中取出任务并放入调用栈执行： 任务队列里存放着各种待执行的任务，比如定时器回调、事件监听器回调、Promise回调等等。

Event Loop 就像一个永动机，只要任务队列里有任务，它就会不断地循环，直到所有任务都执行完毕。

第二幕： MacroTask (宏任务) vs. MicroTask (微任务)：谁先上？

任务队列里的任务可不是随便排队的，它们分属两个不同的阵营： MacroTask 和 MicroTask。这两个阵营的任务有不同的优先级，Event Loop 会根据优先级来决定哪个阵营的任务先执行。

MacroTask (宏任务)：
- 包括：script (整体代码)、setTimeout、setInterval、setImmediate (Node.js 环境)、I/O 操作 (如文件读写) 等。
- 可以理解为比较“粗粒度”的任务，每次执行完一个 MacroTask，Event Loop 都会检查 MicroTask 队列。
MicroTask (微任务)：
- 包括：Promise.then、MutationObserver (监听DOM变化的API)、process.nextTick (Node.js 环境)等。
- 可以理解为“细粒度”的任务，执行时机比 MacroTask 更早。

重点来了：Event Loop 的执行顺序

执行一个 MacroTask (比如 script 整体代码)。
清空 MicroTask 队列： 在当前 MacroTask 执行完毕后，Event Loop 会立即执行 MicroTask 队列中的所有任务，直到队列为空。
渲染更新： 如果需要更新UI，浏览器会在执行完 MicroTask 队列后进行渲染。
重复以上步骤，直到 MacroTask 队列和 MicroTask 队列都为空。

可以用表格来更清晰的展示：

阶段	描述
1	从 MacroTask 队列中取出一个 MacroTask 并放入调用栈执行 (通常是 script 代码)。
2	执行当前 MacroTask。
3	检查 MicroTask 队列，如果队列不为空，则依次执行 MicroTask，直到队列为空。
4	浏览器更新渲染。
5	重复步骤 1-4，直到 MacroTask 队列和 MicroTask 队列都为空。

第三幕：代码实战：让你彻底搞懂 MacroTask 和 MicroTask

光说不练假把式，咱们直接上代码，用实例来感受一下 MacroTask 和 MicroTask 的威力。

例子 1: setTimeout vs. Promise.then

console.log('script start');

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

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

输出结果：

script start
script end
promise1
promise2
setTimeout

解析：

首先，执行 script 整体代码，打印 "script start"。
遇到 setTimeout，将其回调函数放入 MacroTask 队列。
遇到 Promise.resolve().then()，将其回调函数放入 MicroTask 队列。
打印 "script end"。
当前 MacroTask (script 整体代码) 执行完毕，开始执行 MicroTask 队列。
依次执行 Promise 的回调函数，打印 "promise1" 和 "promise2"。
MicroTask 队列为空，Event Loop 进入下一个循环，从 MacroTask 队列中取出 setTimeout 的回调函数执行，打印 "setTimeout"。

例子 2: 嵌套的 Promise

console.log('script start');

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

Promise.resolve().then(function() {
  console.log('promise1');
  return Promise.resolve();
}).then(function() {
  console.log('promise2');
});

console.log('script end');

输出结果：

script start
script end
promise1
promise2
setTimeout

解析：

和上一个例子类似，前四步的执行结果一样。
执行 "promise1" 后，return Promise.resolve() 会创建一个新的 Promise，并将其 .then() 的回调函数放入 MicroTask 队列。注意，这个新的 MicroTask 也会在当前 MacroTask 结束后立即执行。
因此，"promise2" 会在 "setTimeout" 之前打印。

例子 3: 多个 setTimeout 和 Promise

console.log('script start');

setTimeout(function() {
  console.log('setTimeout1');
}, 0);

setTimeout(function() {
  console.log('setTimeout2');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
});

Promise.resolve().then(function() {
  console.log('promise2');
});

console.log('script end');

输出结果：

script start
script end
promise1
promise2
setTimeout1
setTimeout2

解析：

setTimeout1 和 setTimeout2 的回调函数都放入 MacroTask 队列。注意，它们放入队列的顺序和代码中的顺序一致。
promise1 和 promise2 的回调函数都放入 MicroTask 队列。
在当前 MacroTask (script 整体代码) 执行完毕后，先执行 MicroTask 队列，打印 "promise1" 和 "promise2"。
然后，Event Loop 进入下一个循环，依次执行 MacroTask 队列中的 setTimeout1 和 setTimeout2 的回调函数，打印 "setTimeout1" 和 "setTimeout2"。

例子 4: MutationObserver

<!DOCTYPE html>
<html>
<head>
  <title>MutationObserver Example</title>
</head>
<body>
  <div id="myDiv">Hello</div>

  <script>
    console.log('script start');

    const div = document.getElementById('myDiv');

    const observer = new MutationObserver(function(mutations) {
      console.log('mutation callback');
      mutations.forEach(function(mutation) {
        console.log('mutation:', mutation.type);
      });
    });

    observer.observe(div, { attributes: true, childList: true, subtree: true });

    Promise.resolve().then(function() {
      console.log('promise');
    });

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

    div.textContent = 'World';

    console.log('script end');
  </script>
</body>
</html>

输出结果：

script start
script end
mutation callback
mutation: characterData
promise
setTimeout

解析:

script start 和 script end 首先被打印。
MutationObserver的回调函数被放入MicroTask队列，因为DOM发生变化(div.textContent = 'World')。
Promise的回调函数也被放入MicroTask队列。
setTimeout回调函数被放入MacroTask队列。
MicroTask队列先执行，因此mutation callback 和 promise 先被打印。注意，MutationObserver在DOM变化之后触发，并且在下一个渲染周期之前执行其回调。
最后，setTimeout回调函数被执行。

第四幕：避坑指南： Event Loop 的常见误区

认为 setTimeout(…, 0) 会立即执行： 这是一个常见的误解。 setTimeout(..., 0) 只是将回调函数放入 MacroTask 队列，它仍然需要等待当前 MacroTask 和 MicroTask 队列执行完毕后才能执行。
忽略 MicroTask 的优先级： 一定要记住，MicroTask 的优先级高于 MacroTask。在编写代码时，要充分利用 MicroTask 的特性，比如可以使用 Promise.then 来确保某些操作在下一个渲染周期之前执行。
过度使用 setTimeout： 如果需要频繁执行某些操作，尽量避免使用 setTimeout，因为它会增加 Event Loop 的负担，影响性能。可以考虑使用 requestAnimationFrame 来优化动画效果，或者使用 setInterval 来定期执行任务。当然，对于复杂的场景，你需要仔细权衡利弊。
陷入死循环： 如果你在 MicroTask 队列中不断添加新的 MicroTask，可能会导致 Event Loop 陷入死循环，最终导致浏览器崩溃。所以，一定要小心谨慎，避免在 MicroTask 中执行耗时操作，或者无限循环地创建 MicroTask。

第五幕：Event Loop 在实际开发中的应用

理解 Event Loop 对于编写高性能的 JavaScript 代码至关重要。以下是一些实际应用场景：

优化动画效果： 使用 requestAnimationFrame 可以确保动画在浏览器的下一个渲染周期之前执行，从而避免卡顿现象。
处理异步操作： 使用 Promise 和 async/await 可以更优雅地处理异步操作，避免回调地狱。
控制任务的执行顺序： 通过合理地使用 MacroTask 和 MicroTask，可以精确地控制任务的执行顺序，确保程序的逻辑正确。
提升用户体验： 通过优化 Event Loop 的执行效率，可以提升网页的响应速度，改善用户体验。

第六幕：总结与彩蛋

今天，我们一起深入探讨了 JS Event Loop 的原理和应用，相信你已经对 MacroTask 和 MicroTask 有了更清晰的认识。记住，Event Loop 不是一个抽象的概念，而是 JavaScript 运行机制的核心。掌握了它，你就能更好地理解 JavaScript 的异步编程模型，写出更高效、更健壮的代码。

彩蛋：

Event Loop 的执行过程是一个不断循环的过程，它会一直运行，直到所有任务都执行完毕。
浏览器和 Node.js 的 Event Loop 实现略有不同，但基本原理是相同的。
Event Loop 是 JavaScript 异步编程的基础，理解 Event Loop 对于编写高质量的 JavaScript 代码至关重要。

希望今天的脱口秀能帮助你更好地理解 Event Loop。如果你还有任何疑问，欢迎随时提问！咱们下期再见！拜拜！

发表回复 取消回复

发表回复取消回复