JavaScript事件循环机制（event loop）、宏任务、微任务总结

生活、追梦者

已于 2024-08-26 18:10:17 修改

阅读量1.3k

点赞数 19

分类专栏： JavaScript 文章标签： javascript 开发语言

于 2024-05-30 16:04:51 首次发布

本文链接：https://blog.csdn.net/weixin_45046532/article/details/139326953

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1. 事件循环机制概述

1.1 事件循环的定义

JavaScript 是一种单线程的编程语言，只有一个调用栈，决定了它在同一时间只能做一件事。在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。因此JS又是一个非阻塞、异步、并发式的编程语言。

事件循环（Event Loop）是JavaScript中一种运行机制，它允许JavaScript引擎在单线程环境中处理异步操作。事件循环不断地检查回调队列，并在调用栈清空时执行队列中的回调函数。

1.2 宏任务与微任务的概念

宏任务（Macro Tasks）和微任务（Micro Tasks）是事件循环中的两种任务类型：

宏任务：通常包括如setTimeout, setInterval, I/O操作，UI渲染等。它们在每个事件循环的迭代中按顺序执行。
微任务：包括Promise.then, MutationObserver, process.nextTick等。微任务的优先级高于宏任务，它们会在当前宏任务完成后立即执行，而不是等待下一个事件循环迭代。

2. 宏任务与微任务详解

2.1 宏任务的执行机制

宏任务通常是由浏览器或Node.js环境提供的，它们在事件循环的每个迭代中执行。每个宏任务完成后，事件循环会检查微任务队列，并执行所有微任务，然后再次检查宏任务队列，开始下一个迭代。

2.2 微任务的优先级

微任务的优先级高于宏任务，这意味着在当前宏任务完成后，所有的微任务都会被执行完毕，才会执行下一个宏任务。这种机制确保了微任务能够快速响应，例如Promise的回调能够尽快执行，提高应用程序的响应性。

2.3 宏任务与微任务的实际应用

在实际开发中，理解和区分宏任务与微任务对于编写高效的JavaScript代码至关重要。例如，使用Promise可以确保异步操作的顺序执行，而使用setTimeout可以延迟操作的执行，避免阻塞主线程。

2.4 宏任务与微任务的执行顺序示例

console.log('Script start');

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

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

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

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

console.log('Script end');

上述代码的输出顺序将会是：

Script start
promise1
promise2
Script end
setTimeout
setTimeout2

这个顺序展示了微任务（promise1和promise2）如何在当前宏任务（script执行）完成后立即执行，而宏任务（setTimeout）则在下一个事件循环迭代中执行。

2. 宏任务（Macro Tasks）

2.1 宏任务的分类

宏任务主要可以分为以下几类：

定时器回调：如setTimeout和setInterval，它们会在指定的时间后触发执行。
I/O事件：例如来自网络请求的响应、读取文件操作等。
UI渲染：浏览器在每个事件循环迭代结束时会进行UI的重新渲染。
DOM事件：如click、scroll等，它们会在对应的事件发生时被添加到宏任务队列中。
网络请求：如XMLHttpRequest和fetch请求，它们的响应处理会被作为宏任务添加到队列。

2.2 宏任务的执行顺序

宏任务的执行顺序遵循先进先出（FIFO）的原则。事件循环会在每个迭代中按照以下顺序执行宏任务：

执行栈清空：首先，JavaScript引擎会执行调用栈中的所有同步任务。
执行微任务队列：一旦调用栈清空，事件循环会立即执行所有等待的微任务。
执行宏任务队列：微任务执行完毕后，事件循环会从宏任务队列中取出排在队首的任务执行。
重复以上步骤：事件循环会不断重复上述步骤，直到调用栈和任务队列都为空。

这种机制确保了宏任务的执行顺序与它们被添加到队列中的顺序一致，同时也保证了微任务能够在当前宏任务结束后立即得到处理，从而提高了应用程序的响应速度和效率。

例如，考虑以下代码片段：

console.log('Script start');

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

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

console.log('Script end');

执行顺序将会是：

Script start
Script end
promise1
setTimeout

在这个例子中，尽管setTimeout被设置为0毫秒后执行，它仍然是一个宏任务，因此会在当前宏任务（即脚本执行）结束后，所有微任务（这里是promise1）执行完毕后，才被事件循环处理。

3. 微任务（Micro Tasks）

3.1 微任务的分类

微任务主要可以分为以下几类：

Promise回调：Promise.then(), Promise.catch(), Promise.finally() 是最常见的微任务来源，它们在Promise对象状态改变时被添加到微任务队列。
MutationObserver：用于监听DOM变化的微任务，当DOM发生变化时，相关的回调会被添加到微任务队列。
process.nextTick：在Node.js环境中，process.nextTick() 用于将回调函数添加到当前执行循环的末尾，以高优先级执行。

这些微任务的共同特点是它们不需要浏览器或Node.js环境的外部线程来执行，而是在当前执行栈清空后立即执行，这样可以保证即使在大量异步操作的情况下，相关的回调也能迅速得到处理。

3.2 微任务的执行顺序

微任务的执行顺序遵循先进先出（FIFO）的原则，但它们会在当前宏任务执行完毕后立即执行，而不需要等待下一个宏任务的到来。这意味着，在一个宏任务执行期间创建的所有微任务，都会在这个宏任务结束后，下一个宏任务开始之前一次性执行完毕。

这种设计使得微任务可以被用作优化性能的手段，因为它们可以立即处理，而不需要等待下一个事件循环迭代。例如，如果一个微任务是处理用户输入，那么它可以在不影响当前用户界面的情况下立即响应。

以下是微任务执行顺序的一个示例：

console.log('Script start');

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

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

console.log('Script end');

执行顺序将会是：

Script start
promise1
promise2
Script end
setTimeout

在这个例子中，promise2 是在 promise1 的回调中被创建并添加到微任务队列的，它将在 promise1 执行完毕后立即执行，而不会等待 setTimeout 这个宏任务完成。这展示了微任务如何能够在同一个宏任务中被连续处理，提高了代码的执行效率。

4. 事件循环的工作流程

4.1 执行栈与任务队列

执行栈（Call Stack）是JavaScript执行环境的核心，用于跟踪函数执行的上下文。当执行一个函数时，该函数的上下文会被添加到执行栈的顶部。执行栈遵循后进先出（LIFO）的原则，这意味着最后一个进入执行栈的函数会最先执行完毕并退出栈。

任务队列（Task Queue）则是一个存放异步任务的队列，包括宏任务和微任务。当执行栈清空后，事件循环会检查任务队列并执行其中的回调函数。宏任务和微任务队列是分开管理的，微任务队列的优先级高于宏任务队列。

执行栈的工作原理

同步任务：当JavaScript代码执行时，所有的同步任务会依次进入执行栈，按照先进后出的顺序执行。
异步任务：当遇到异步操作，如setTimeout或Promise，它们不会立即执行，而是注册到对应的任务队列中。

任务队列的工作原理

宏任务队列：当执行栈清空后，事件循环会从宏任务队列中取出第一个任务执行。
微任务队列：执行栈清空且宏任务队列执行完毕后，事件循环会检查微任务队列，并执行所有微任务，直到队列为空。

4.2 事件循环的tick机制

事件循环的tick机制是指事件循环在每个迭代中执行的操作。一个tick通常包括以下步骤：

执行栈清空：JavaScript引擎首先执行执行栈中的所有同步任务。
微任务执行：执行栈清空后，事件循环会执行所有可用的微任务。
宏任务执行：微任务执行完毕后，事件循环会从宏任务队列中取出一个任务并执行。
渲染更新：在浏览器环境中，UI渲染可能会在每个tick之后发生，以更新浏览器界面。

tick机制的重要性

避免阻塞：tick机制确保了即使在执行异步任务时，主线程也不会被阻塞，从而保持了应用程序的响应性。
任务优先级：通过优先执行微任务，JavaScript引擎可以确保高优先级的回调（如Promise回调）能够及时执行。
有序执行：tick机制保证了任务按照一定的顺序执行，从而避免了竞态条件和潜在的错误。

tick示例

考虑以下代码：

console.log('Start');

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

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

console.log('End');

执行流程如下：

Start 被记录到控制台。
setTimeout 注册为一个宏任务，但不会立即执行。
Promise 回调注册为一个微任务。
End 被记录到控制台。
执行栈清空后，事件循环开始处理微任务，promise 被记录到控制台。
微任务队列清空后，事件循环处理宏任务队列中的setTimeout，setTimeout 被记录到控制台。

最终输出顺序为：

Start
End
promise
setTimeout

这个示例展示了tick机制如何管理同步任务、宏任务和微任务的执行顺序，确保了JavaScript程序的流畅运行。

5. 宏任务与微任务的优先级比较

5.1 执行优先级的差异

宏任务与微任务的优先级差异体现在事件循环的执行顺序上。在JavaScript的事件循环中，微任务的执行优先级高于宏任务。

微任务优先级：在当前宏任务执行完毕后，所有的微任务会被一次性执行完毕。这意味着，即使在宏任务队列中存在多个宏任务，它们也必须等待当前宏任务中的所有微任务执行完成后才能开始执行。微任务的这种高优先级特性，使得它们非常适合用于执行需要快速响应的操作，如用户界面的更新或数据的预处理。
宏任务优先级：宏任务则遵循标准的队列顺序，即先进入队列的宏任务先执行。一旦当前宏任务中的所有微任务执行完毕，事件循环会从宏任务队列中取出下一个宏任务来执行。

5.2 优先级对代码执行的影响

优先级的差异对JavaScript代码的执行流程有着显著的影响。

微任务的影响：由于微任务的高优先级，它们可以确保在下一个宏任务开始之前执行，这有助于保持应用程序的响应性。例如，在处理用户输入或DOM更新时，通过使用微任务，可以确保这些操作在不影响用户操作的情况下尽快完成。
宏任务的影响：宏任务的执行顺序保证了它们按照注册的顺序执行，这对于需要按特定顺序执行的任务（如网络请求的响应处理）非常重要。然而，如果宏任务执行时间过长，可能会导致应用程序的响应性降低，因为微任务必须等待当前宏任务完成后才能执行。

在实际开发中，合理利用宏任务和微任务的优先级差异，可以优化代码的执行效率和响应性。例如，可以将一些不紧急的更新操作放在宏任务中，而将需要立即处理的操作放在微任务中。这样，即使在处理大量异步操作时，应用程序也能保持良好的用户体验。

6. 实际应用中的宏任务与微任务

6.1 常见宏任务API示例

宏任务API在JavaScript中的应用非常广泛，以下是一些常见的宏任务API示例及其用法：

setTimeout 和 setInterval：这两个函数用于在指定的时间后执行一个函数或指定的时间间隔内重复执行一个函数。

setTimeout(() => {
  console.log('This is a setTimeout');
}, 1000);

setInterval(() => {
  console.log('This is setInterval');
}, 1000);

I/O事件：如XMLHttpRequest或fetch API，用于处理网络请求，响应通常作为宏任务执行。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

UI渲染：浏览器会在每个事件循环迭代结束时进行UI渲染，这可以视为一种宏任务。
```
document.body.innerHTML = '<div>New UI content</div>';
```

DOM事件：如click或scroll事件，它们的回调函数作为宏任务执行。

document.addEventListener('click', () => {
  console.log('DOM click event');
});

6.2 常见微任务API示例

微任务API允许开发者执行需要快速响应的任务，以下是一些常见的微任务API示例及其用法：

Promise.then, Promise.catch, Promise.finally：当Promise状态改变时，这些方法注册的回调函数会被添加到微任务队列中。

Promise.resolve('Success')
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log('Promise is settled'));

MutationObserver：用于监听DOM的变化，当DOM发生变化时，其回调函数作为微任务执行。

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => console.log(mutation));
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

process.nextTick：在Node.js环境中，此函数用于延迟函数的执行直到当前操作完成，其回调函数作为微任务执行。
```
process.nextTick(() => {
  console.log('This is a nextTick');
});
```

通过合理利用宏任务和微任务，开发者可以优化代码的执行顺序和性能，提高应用程序的响应速度和用户体验。

7. 浏览器与Node.js中的事件循环差异

7.1 浏览器中的事件循环实现

浏览器中的事件循环机制是JavaScript非阻塞执行的关键。浏览器通过多线程与事件循环机制的结合，实现了高效的异步任务处理。

多线程模型：浏览器拥有多个线程，如渲染线程、JavaScript引擎线程、定时器线程等，这些线程协同工作，处理各种任务。
宏任务与微任务队列：浏览器中的事件循环会按照宏任务和微任务的顺序执行。每个宏任务执行完毕后，会清空当前所有微任务队列中的任务。
UI渲染：浏览器会在每个事件循环的迭代中进行UI渲染，以确保用户界面的流畅更新。

浏览器事件循环示例

考虑以下代码：

console.log('Start');

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

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

console.log('End');

在浏览器中，执行顺序将会是：

Start
End
promise
setTimeout

7.2 Node.js中的事件循环实现

Node.js中的事件循环与浏览器有所不同，特别是在处理宏任务和微任务的顺序上。

单线程事件循环：Node.js采用的是单线程模型，通过事件循环来处理所有的异步操作，避免了多线程的复杂性。
不同的阶段：Node.js的事件循环包含多个阶段，如 timers、I/O callbacks、idle、prepare、poll 等，每个阶段都有其特定的任务队列。
process.nextTick()：Node.js提供了process.nextTick()函数，允许开发者将回调添加到当前事件循环迭代的末尾，这比setTimeout拥有更高的优先级。

Node.js事件循环示例

在Node.js中，以下代码的执行顺序将会是：

console.log('Start');

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

new Promise((resolve) => {
  console.log('Promise');
  resolve();
}).then(() => {
  console.log('promise');
});

console.log('End');

执行顺序：

Start
Promise
End
promise
setTimeout

在这个例子中，process.nextTick()的回调将比setTimeout的回调更早执行，展示了Node.js中事件循环的特殊行为。

浏览器与Node.js事件循环的差异总结

多线程 vs 单线程：浏览器通过多线程模型处理异步任务，而Node.js使用单线程事件循环。
宏任务与微任务的执行：浏览器在每个事件循环迭代中先执行宏任务，然后清空微任务队列；Node.js在每个阶段结束后检查微任务队列，并在适当时机执行微任务。
process.nextTick()：Node.js特有的process.nextTick()允许回调在当前事件循环迭代的末尾执行，提供了更高的执行优先级。

理解这些差异对于在不同环境中编写高效且可靠的JavaScript代码至关重要。