剖析浏览器环境下 JS 的宏任务和微任务机制

前端

2023-11-21 04:17:22

JavaScript 事件循环机制：深入浅出

什么是 JavaScript 事件循环？

JavaScript 是一种单线程语言，这意味着它一次只能执行一个任务。然而，浏览器却能很好地处理异步请求，这似乎违背了单线程的原则。这一切归功于 JavaScript 的事件循环机制。

事件循环机制是一个不断运行的循环，它负责协调 JavaScript 代码的执行和各种事件的处理。它允许浏览器处理用户交互、网络请求和其他异步任务，而不会阻塞主线程。

JavaScript 执行过程

JavaScript 的执行过程可以分为以下几个阶段：

1. 同步任务执行： 同步任务在主线程上执行，按照代码顺序一个接一个地执行，直到完成。

2. 事件触发： 当某些操作或条件发生时，就会触发事件。例如，点击按钮、鼠标移动或页面加载完成等。

3. 事件队列： 触发事件时，会产生一个事件对象，该对象被放入事件队列中。这是一个先进先出的队列，意味着最先发生的事件会被最先处理。

4. 事件处理程序： 当主线程空闲时，它会从事件队列中取出一个事件对象，并将其传递给事件处理程序进行处理。事件处理程序可以是内联函数、命名函数或方法。

5. 微任务队列： 在事件处理程序执行期间，可能还会产生新的任务，称为微任务。这些微任务被放入微任务队列中，这是一个先进先出的队列，优先级高于事件队列。

6. 宏任务队列： 宏任务也是在事件处理程序执行期间产生的任务，但优先级低于微任务。它们被放入宏任务队列中，这是一个先进先出的队列。

7. 事件循环： 事件循环机制是一个不断运行的循环，它从事件队列中取出事件对象，并将其传递给事件处理程序进行处理。然后，它会处理微任务队列和宏任务队列中的任务。这个过程一直重复，直到所有任务都完成。

常见异步任务类型

JavaScript 中常见的异步任务类型包括：

setTimeout()： 创建一个延迟执行的函数。
setInterval()： 创建一个按间隔重复执行的函数。
Promise： 表示异步操作的结果。
MutationObserver： 监视 DOM 元素的变化并触发回调函数。
网络请求： 与服务器进行数据交换。

优化 JavaScript 性能

我们可以通过利用事件循环机制来优化 JavaScript 应用程序的性能：

减少同步任务： 同步任务会阻塞主线程，导致页面卡顿。可以将它们拆分成异步任务，以提高响应速度。
合理利用微任务： 微任务优先级高于宏任务，可以将需要尽快执行的任务放入微任务队列中。
合理利用宏任务： 可以将不需要立即执行的任务放入宏任务队列中，以释放主线程资源。

代码示例

// 同步任务
console.log('同步任务');

// 微任务
setTimeout(() => {
  console.log('微任务');
}, 0);

// 宏任务
setTimeout(() => {
  console.log('宏任务');
}, 100);

// 事件处理程序
document.addEventListener('click', () => {
  console.log('事件处理程序');
});