web前端知识：js中的微任务和宏任务

输入图片描述

js中什么是微任务和宏任务

在 JavaScript 引擎中，任务分为两种类型：微任务（microtask）和宏任务（macrotask）。微任务是指在当前任务执行结束后立即执行的任务，它可以看作是在当前任务的“尾巴”添加的任务。常见的微任务包括 Promise 回调和 process.nextTick。宏任务是指需要排队等待 JavaScript 引擎空闲时才能执行的任务。常见的宏任务包括 setTimeout、setInterval、I/O 操作、DOM 事件等。 JavaScript 引擎会先执行当前任务中的所有微任务，然后再执行宏任务队列中的第一个任务。这个过程会不断重复，直到宏任务队列中的任务被全部执行完毕。

JS为什么要区分微任务和宏任务

JavaScript 之所以要区分微任务和宏任务，是因为微任务和宏任务的执行顺序不同，这对 Web 开发中一些异步操作的实现有着重要的影响。在 JavaScript 中，微任务会优先于宏任务执行。这意味着在当前任务执行结束后，所有微任务都会被立即执行，而宏任务只有在所有微任务执行完毕后才会执行。这种执行顺序保证了微任务的优先级，可以避免一些问题的出现，比如处理 Promise 对象时可能会出现的竞态条件。举个例子，当我们使用 Promise 对象时，它会返回一个 Promise 实例并将回调函数放入微任务队列中。当 Promise 的状态发生改变时，它会立即执行微任务队列中的回调函数，而不是等待当前任务结束后再执行。这种特性可以保证 Promise 回调函数的执行顺序，避免出现竞态条件，从而使代码更加可靠。另一方面，宏任务的执行是在当前任务结束后才会执行的，这意味着可以将一些耗时的操作放入宏任务队列中，从而避免阻塞当前任务的执行。比如，我们可以将一些需要等待一段时间才能执行的代码放入 setTimeout 的回调函数中，这样可以使页面在执行这些代码的同时仍然保持响应，提高用户体验。因此，JavaScript 之所以要区分微任务和宏任务，是为了保证异步操作的正确性和性能。

JS中微任务和宏任务执行顺序

首先执行当前代码（同步任务），直到遇到第一个宏任务或微任务。
如果遇到微任务，则将它添加到微任务队列中，继续执行同步任务。
如果遇到宏任务，则将它添加到宏任务队列中，继续执行同步任务。
当前任务执行完毕后，JavaScript 引擎会先执行所有微任务队列中的任务，直到微任务队列为空。
然后执行宏任务队列中的第一个任务，直到宏任务队列为空。
重复步骤 4 和步骤 5，直到所有任务都被执行完毕。需要注意的是，微任务比宏任务优先级要高，因此在同一个任务中，如果既有微任务又有宏任务，那么微任务会先执行完毕。而在不同的任务中，宏任务的执行优先级要高于微任务，因此在一个宏任务执行完毕后，它才会执行下一个宏任务和微任务队列中的任务。举个例子，假设当前代码中有一个 setTimeout 和一个 Promise，它们分别对应一个宏任务和一个微任务。那么执行顺序如下：
1). 执行当前代码，将 setTimeout 和 Promise 添加到宏任务和微任务队列中。
2). 当前任务执行完毕，JavaScript 引擎先执行微任务队列中的 Promise 回调函数。
3). 微任务队列为空后，再执行宏任务队列中的 setTimeout 回调函数。需要注意的是，在一些特殊情况下，微任务和宏任务的执行顺序可能会发生变化，比如在使用 MutationObserver 监听 DOM 变化时，它会被视为一个微任务，但是它的执行顺序可能会比其他微任务更靠后。因此，需要根据具体情况来理解和处理微任务和宏任务的执行顺序。

js微任务和宏任务有哪些

微任务：Promise 回调函数、process.nextTick、Object.observe（已废弃）、MutationObserver。
宏任务：setTimeout、setInterval、setImmediate（Node.js 独有）、requestAnimationFrame、I/O 操作、UI 渲染。

需要注意的是，不同的 JavaScript 引擎可能会存在一些差异，有些任务可能既可以作为微任务，也可以作为宏任务，比如在一些浏览器中，使用 MutationObserver 监听 DOM 变化时，它会被视为一个微任务，但是在一些 Node.js 版本中，它会被视为一个宏任务。另外，需要注意的是，Promise 回调函数是微任务，但是它的内部代码可能会包含其他的异步操作，这些异步操作可能是微任务或宏任务，因此在处理 Promise 时需要考虑到它内部可能包含的其他异步操作。

案例

1.微任务：Promise 回调函数，宏任务：setTimeout 回调函数

console.log('start');
setTimeout(() => console.log('setTimeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('end');
// start
// end
// Promise
// setTimeout

解析：首先输出 start，然后通过 setTimeout 方法注册了一个回调函数，它会被添加到宏任务队列中。接着创建了一个 Promise 实例，并且通过 then 方法注册了一个回调函数，在 Promise 对象的状态改变时会执行这个回调函数。接着输出 end。因为 Promise 回调函数是微任务，所以它会被添加到微任务队列中，等待执行。等到主线程的同步任务执行完毕后，JavaScript 引擎会先执行微任务队列中的任务，输出 Promise，然后执行宏任务队列中的任务，输出 setTimeout。

2.微任务：process.nextTick 回调函数，宏任务：setImmediate 回调函数

console.log('start');
setImmediate(() => console.log('setImmediate'));
process.nextTick(() => console.log('process.nextTick'));
console.log('end');
// start
// end
// process.nextTick
// setImmediate

解析：在 Node.js 环境中，process.nextTick 回调函数是排在微任务队列最前面的，优先级比 Promise 回调函数还要高。而 setImmediate 回调函数是排在宏任务队列最后面的。所以，以上代码会先输出 start，然后输出 end。等到主线程的同步任务执行完毕后，JavaScript 引擎会先执行微任务队列中的任务，输出 process.nextTick，然后执行宏任务队列中的任务，输出 setImmediate。

3.微任务：Promise 回调函数，宏任务：requestAnimationFrame 回调函数

console.log('start');
requestAnimationFrame(() => console.log('requestAnimationFrame'));
Promise.resolve().then(() => console.log('Promise'));
console.log('end');
// start
// end
// Promise
// requestAnimationFrame

解析：首先输出 start，然后通过 requestAnimationFrame 方法注册了一个回调函数，它会被添加到宏任务队列中。接着创建了一个 Promise 实例，并且通过 then 方法注册了一个回调函数，在 Promise 对象的状态改变时会执行这个回调函数。接着输出 end。因为 Promise 回调函数是微任务，所以它会被添加到微任务队列中，等待执行。等到主线程的同步任务执行完毕后，JavaScript 引擎会先执行微任务队列中的任务，输出 Promise，然后执行宏任务队列中的任务，输出 requestAnimationFrame。

4.微任务：Promise 回调函数，宏任务：XMLHttpRequest 回调函数

console.log('start');
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
xhr.onload = () => console.log('XMLHttpRequest');
xhr.send();
Promise.resolve().then(() => console.log('Promise'));
console.log('end');
// start
// end
// Promise
// XMLHttpRequest

解析：首先输出 start，然后创建了一个 XMLHttpRequest 对象，并且通过 open 方法和 send 方法发送了一个 GET 请求。接着通过 onload 方法注册了一个回调函数，在请求成功后会执行这个回调函数。接着创建了一个 Promise 实例，并且通过 then 方法注册了一个回调函数，在 Promise 对象的状态改变时会执行这个回调函数。接着输出 end。因为 Promise 回调函数是微任务，所以它会被添加到微任务队列中，等待执行。等到主线程的同步任务执行完毕后，JavaScript 引擎会先执行微任务队列中的任务，输出 Promise，然后等待 XMLHttpRequest 对象的回调函数执行。当请求成功后，JavaScript 引擎会执行宏任务队列中的任务，输出 XMLHttpRequest。

结语

牵手持续为你分享各类知识和软件，欢迎访问、关注、讨论并留下你的小心心❤