javaScript 中的宏任务、微任务

一嘴一个橘子

已于 2023-11-16 11:32:39 修改

阅读量335

点赞数 1

文章标签： javascript

于 2023-11-16 11:02:31 首次发布

本文链接：https://blog.csdn.net/pig_ning/article/details/134437019

版权

宏任务：

是指，需要排队等待 JavaScript 引擎空闲时才能执行的任务，

常见的宏任务包括 setTimeout、setInterval、setImmediate（Node.js 独有）、requestAnimationFrame、I/O 操作、XMLHttpRequest、DOM事件等

微任务：

是指，在当前任务执行结束后，立即执行的任务，它可以看作是在当前任务的“尾巴”添加的任务，

常见的微任务包括 Promise回调函数、process.nextTick、Object.observe（已废弃）、MutationObserver

说一下

JavaScript引擎，会先执行当前任务中的所有微任务，然后再执行宏任务队列中的第一个任务，这个过程会不断重复，直到宏任务队列中的任务被全部执行完毕。

宏任务、微任务都属于异步任务，

宏任务包括 setTimeout、setInterval、I/O 等操作，

微任务包括 promise的then、resolve、reject 等

首先执行同步代码，遇到异步任务，如果是宏任务就放入宏任务队列，微任务就放到微任务队列，

当同步代码执行完毕，就会执行微任务队列，直到微任务队列清空，

然后从宏任务对列调用宏任务到主线程执行，就这样不断循环，直到所有任务执行完毕

JavaScript之所以要区分微任务、宏任务，是因为，微任务和宏任务的执行顺序不同，这对Web开发中一些异步操作的实现有重要的影响

在JavaScript中，微任务会优先于宏任务执行，
这意味着，在当前任务执行结束后，所有微任务都会被立即执行，而宏任务只有在所有微任务执行完毕后才会执行，
这种执行顺序保证了微任务的优先级，可以避免一些问题的出现。

1、
比如，处理 Promise对象时可能会出现的竞态条件，

举个例子，当我们使用Promise对象时，它会返回一个Promise实例并将回调函数放入微任务队列中，

当 Promise的状态发生改变时，它会立即执行微任务队列中的回调函数，而不是等待当前任务结束后再执行，

这种特性可以保证 Promise回调函数的执行顺序，避免出现竞态条件，从而使代码更加可靠。

补充（举例解释一下）：
假设，有两个Promise对象P1、P2，
它们的状态都发生了改变，但是P1的回调函数在微任务队列中先于P2的回调函数执行，
这种情况下，即使P2的状态改变发生在P1之前，P2的回调函数也会等待P1的回调函数执行完毕后再执行，
这样可以避免多个回调函数同时执行而产生的竞态条件。

如果当前任务执行一半了，Promise状态发生改变了，会停下当前任务去执行微任务队列中Promise的回调函数吗？？？？？？
不会的，
即使当前任务执行了一半，如果Promise状态发生改变，也会立即执行微任务队列中的回调函数，
但是不会停下当前任务的执行。当前任务的执行会继续完成，然后才会回到微任务队列中执行其他的回调函数，
因此，即使Promise状态发生改变，也不会直接打断当前任务的执行。

2、
另一方面，宏任务的执行是在当前任务结束后才会执行的，这意味着，可以将一些耗时的操作放入宏任务队列中，从而避免阻塞当前任务的执行，

比如，我们可以将一些需要等待一段时间才能执行的代码放入 setTimeout 的回调函数中，

这样可以使页面在执行这些代码的同时仍然保持响应，提高用户体验。

因此，JavaScript 之所以要区分微任务和宏任务，是为了保证异步操作的正确性和性能。

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

1、首先执行当前代码（同步任务），直到遇到第一个宏任务或微任务，

2、如果遇到微任务，则将它添加到微任务队列中，继续执行同步任务，

3、如果遇到宏任务，则将它添加到宏任务队列中，继续执行同步任务，

4、当前任务执行完毕后，JavaScript引擎会先执行所有微任务队列中的任务，直到微任务队列为空，

5、然后执行宏任务队列中的第一个任务，直到宏任务队列为空，

重复步骤4、步骤5，直到所有任务都被执行完毕。

需要注意的是，微任务比宏任务优先级要高，因此在同一个任务中，如果既有微任务又有宏任务，那么微任务会先执行完毕，

而在不同的任务中，宏任务的执行优先级要高于微任务，因此在一个宏任务执行完毕后，它才会执行下一个宏任务和微任务队列中的任。

举个例子，

假设当前代码中有一个 setTimeout（宏任务）和一个 Promise（微任务），它们分别对应一个宏任务和一个微任务。那么执行顺序如下：

1、执行当前代码，将 setTimeout 和 Promise 添加到宏任务和微任务队列中，

2、当前任务执行完毕，JavaScript引擎，先执行微任务队列中的 Promise回调函数，

3、微任务队列为空后，再执行宏任务队列中的 setTimeout回调函数。

需要注意的是：在一些特殊情况下，微任务和宏任务的执行顺序可能会发生变化，比如在使用 MutationObserver 监听 DOM 变化时，
它会被视为一个微任务，但是它的执行顺序可能会比其他微任务更靠后。因此，需要根据具体情况来理解和处理微任务和宏任务的执行顺序。

看下面几个案例

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')

// 创建 XMLHttpRequest对象并设置 onload回调函数。这个函数会在 HTTP请求成功完成后被调用。
const xhr = new XMLHttpRequest()
xhr.onload = () => console.log('XMLHttpRequest')
xhr.open('GET', 'someurl')
xhr.send()

Promise.resolve()
  .then(() => console.log('Promise'))

console.log('end')

// start、end、Promise、XMLHttpRequest