JS前端宏任务微任务及Event Loop使用详解

2023年6月11日下午12:40 • JavaScript

JS前端宏任务、微任务及Event Loop使用详解

在JavaScript中，我们经常听到宏任务（Macro Task）、微任务（Micro Task）和Event Loop的概念。本文将详细讲解这些概念，以及它们在JavaScript中的使用。

1. 前置知识

在开始讲解之前，我们需要了解一些前置知识：

JavaScript是单线程的，意味着任务只能一次执行一个任务。
由于JavaScript是单线程的，如果某个任务阻塞了线程，其他任务将无法执行，因此我们需要一种机制来管理异步任务。
任务可以分为两种：宏任务和微任务。

2. 宏任务和微任务

宏任务和微任务是两种不同类型的任务，它们的执行顺序是不同的。

2.1. 宏任务

宏任务（Macro Task）是指在当前任务队列中被调度的任务。例如：

DOM事件处理
setTimeout
setInterval
setImmediate（nodejs独有）
requestAnimationFrame（浏览器独有）
I/O操作（nodejs独有）

2.2. 微任务

微任务（Micro Task）是指在当前任务执行结束后需要立即执行的任务。例如：

Promise.then
Promise.catch
Promise.finally
MutationObserver
process.nextTick（nodejs独有）
Object.observe（已废弃）

3. Event Loop

Event Loop 翻译为事件循环，是JavaScript的一种执行机制。

Event Loop 有一个很重要的概念：任务队列（Task Queue），即宏任务和微任务的队列。

Event Loop的执行过程如下：

执行全局Script同步代码，这些同步代码可能会产生宏任务或者微任务。
执行所有微任务，直到微任务队列为空。
取出一个宏任务执行，执行过程中产生的微任务会加入微任务队列。
重复步骤2-3，直到所有任务都执行完毕。

4. 示例说明

4.1. 示例一

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

解释：

console.log('script start')和console.log('script end')是同步代码，直接输出。
setTimeout是一个宏任务，将它加入宏任务队列中。
Promise.resolve().then()是两个微任务，将它们加入微任务队列中。
当Script执行完毕时，JavaScript会立刻执行所有微任务。因此，先输出promise1，然后输出promise2。
当微任务执行完毕时，JavaScript会取出一个宏任务（如果有的话）执行，因此，最后输出setTimeout。

4.2. 示例二

console.log('script start');

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

console.log('script end');