在 JavaScript 引擎中，任务分为两种类型：微任务（microtask）和宏任务（macrotask）。 微任务是指在当前任务执行结束后立即执行的任务，它可以看作是在当前任务的“尾巴”添加的任务。常见的微任务包括 Promise 回调和 process.nextTick。 宏任务是指需要排队等待 JavaScript 引擎空闲时才能执行的任务。常见的宏任务包括 setTimeout、setInterval、I/O 操作、DOM 事件等。
JS中微任务和宏任务执行顺序
1.首先执行当前代码（同步任务），直到遇到第一个宏任务或微任务。
2.如果遇到微任务，则将它添加到微任务队列中，继续执行同步任务。
3.如果遇到宏任务，则将它添加到宏任务队列中，继续执行同步任务。
4.当前任务执行完毕后，JavaScript 引擎会先执行所有微任务队列中的任务，直到微任务队列为空。
5.然后执行宏任务队列中的第一个任务，直到宏任务队列为空。
重复步骤 4 和步骤 5，直到所有任务都被执行完毕。 需要注意的是，微任务比宏任务优先级要高，因此在同一个任务中，如果既有微任务又有宏任务，那么微任务会先执行完毕。而在不同的任务中，宏任务的执行优先级要高于微任务，因此在一个宏任务执行完毕后，它才会执行下一个宏任务和微任务队列中的任务。 举个例子，假设当前代码中有一个 setTimeout 和一个 Promise，它们分别对应一个宏任务和一个微任务。那么执行顺序如下：
1). 执行当前代码，将 setTimeout 和 Promise 添加到宏任务和微任务队列中。
2). 当前任务执行完毕，JavaScript 引擎先执行微任务队列中的 Promise 回调函数。
3). 微任务队列为空后，再执行宏任务队列中的 setTimeout 回调函数。 需要注意的是，在一些特殊情况下，微任务和宏任务的执行顺序可能会发生变化，比如在使用 MutationObserver 监听 DOM 变化时，它会被视为一个微任务，但是它的执行顺序可能会比其他微任务更靠后。因此，需要根据具体情况来理解和处理微任务和宏任务的执行顺序。
宏任务有哪些
宏任务包括但不限于以下几种常见的任务：
1、定时器任务： 如setTimeout、setInterval
2、I/O任务：例如网络请求、文件读写等需要进行I/O操作的任务
3、用户交互任务：例如点击事件、输入事件等与用户交互的相关任务
4、渲染任务：当浏览器需要重绘或重新布局时触发的任务
5、请求动画帧任务：通过requestAnimationFrame()方法设置的任务，用于在每一帧进行绘画或动画操作
这些任务都是比较耗时的操作，在事件循环中被视为宏任务，需要等待一定时间或特定的触发条件才会执行
微任务有哪些
1、Promise回调：Promise对象的resolve或reject方法的回调函数
2、MutationObserver回调：当DOM发生变化时触发的回调函数
3、Promise的then()回调：Promise对象的then()方法中的回调函数
4、async/await函数中的后续操作：在async函数中使用await等待的操作完成后，紧接着的代码块中的任务
这些任务通常是较小且轻量级的操作，执行时间较短，适合在当前宏任务执行完毕后立即执行。由于微任务的执行时机在每个宏任务执行的过程中，因此可以保证在用户交互之前或渲染之前得到及时处理
示例，以下代码console.log的输出顺序
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
image.png
1.执行当前任务，输出 script start
2.接着遇到setTimeout，放到宏任务队列
3.调用async1函数，输出async1 start
4.接着走到await async2(), 输出async2，把await放到微任务队列
5.接着遇到promise，输出promise1，then方法放到微任务队列
6.接着执行当前任务，输出script end
7.到此，当前任务执行完毕，开始依次执行微任务队列
8.await async2执行完毕，输出async1 end
9.继续执行下一个微任务.then，输出promise2
10.微任务执行完毕，开始执行宏任务队列中的定时函数，输出setTimeout
const promise1 = new Promise((resolve, reject)=> {
console.log(4)
resolve()
}).then(res=> {
console.log(7)
}).then(res=> {
console.log(1)
})
console.log(8)
setTimeout(()=>{console.log(0)},0)
const promise2 = Promise.resolve().then(res=> {
console.log(3)
}).then(res=> {
console.log(6)
})
//4 8 7 3 1 6 0
网友评论