国内购物网站大全,丽江门户网站,网站备案咨询,有没有教做蛋糕的网站概念
微任务和宏任务是在异步编程中经常使用的概念#xff0c;用于管理任务的执行顺序和优先级。
宏任务#xff1a;setTimeout, setInterval#xff0c;I/O 操作和 UI 渲染等。微任务#xff1a; Promise 回调、async/await等
微任务通常比宏任务具有更高的优先级。
执…概念
微任务和宏任务是在异步编程中经常使用的概念用于管理任务的执行顺序和优先级。
宏任务setTimeout, setIntervalI/O 操作和 UI 渲染等。微任务 Promise 回调、async/await等
微任务通常比宏任务具有更高的优先级。
执行情况
微任务会在当前宏任务执行完毕后立即执行而宏任务则需要等待当前宏任务执行完毕后再从宏任务队列中选择下一个宏任务执行。微任务Microtask 总是在所有的 宏任务Macrotask 之前执行。
当一个宏任务执行完毕后JavaScript 引擎会立即检查微任务队列并执行所有微任务。微任务队列为空后引擎才会继续执行下一个宏任务。
好处 保持状态一致性在执行微任务时保证了所有相关的异步操作在同一个宏任务执行周期内完成。这有助于在执行下一个宏任务之前确保应用状态的一致性和数据的完整性。
具体执行顺序
当执行脚本开始时会先执行一个宏任务通常是脚本本身。执行完当前宏任务后检查微任务队列。如果微任务队列不为空则按照先进先出的顺序依次执行所有微任务直到微任务队列为空。这意味着微任务会在下一个宏任务之前执行。当前宏任务执行完毕后浏览器会渲染页面更新UI。检查是否有新的宏任务进入事件队列。如果有则选择最早进入队列的宏任务并执行它。如果队列为空则继续等待新的宏任务进入队列。 重复步骤2-5循环执行宏任务和微任务。
面试题
题目1
console.log(1);setTimeout(function() {console.log(2);
}, 0);Promise.resolve().then(function() {console.log(3);
});console.log(4);输出1 4 3 2 首先打印了数字1和4这是因为它们是同步任务。然后微任务Promise的回调函数被添加到微任务队列中。接下来通过setTimeout函数创建的定时器被添加到宏任务队列中。当JavaScript引擎处于空闲状态时它会先执行微任务队列中的任务然后再执行宏任务队列中的任务。
所以数字3首先被打印这是因为微任务具有更高的优先级它会在当前任务完成后立即执行。然后数字2被打印这是因为宏任务需要等待一段时间直到JavaScript引擎空闲时才会执行。
题目2
console.log(script start);setTimeout(() {console.log(setTimeout); // 宏任务
}, 0);Promise.resolve().then(() {console.log(promise1); // 微任务
}).then(() {console.log(promise2); // 微任务
});console.log(script end); 题目3
async function async1() {console.log(async1 start);await async2();console.log(async1 end);
}
async function async2() {console.log(async2);
}
console.log(script start);
async1();
console.log(script end);
// 输出顺序
// script start
// async1 start
// async2
// script end !!
// async1 end !! 容易错await async()后面的代码相当于是在.then里面执行的所以会先执行 script end
题目4
console.log(Start);new Promise((resolve) {console.log(Inside Promise);resolve();}).then(() {console.log(Promise then);});console.log(End);Promise 的回调即 .then、.catch、.finally 里的函数会被添加到微任务队列中,注意不是Promise的参数
题目5
console.log(Start);async function asyncFunc() {console.log(Inside async function);await new Promise((resolve) {console.log(Inside Promise);resolve();});console.log(After await);
}asyncFunc();console.log(End);题目6 console.log(Start);async function asyncFunc() {console.log(Inside async function);await new Promise((resolve) {console.log(Inside Promise);resolve();}).then((res) {console.log(then);// 注意这里});console.log(After await);}asyncFunc();console.log(End);题目7 const printing () {console.log(A);setTimeout(() { console.log(B); }, 1000);setTimeout(() { console.log(C); }, 0);console.log(D);console.log(E);}printing();A D E C B
题目8 console.log(1); //setTimeout(() {console.log(2);});const p1 new Promise((reslove) {console.log(3); //reslove();});p1.then(() {console.log(4);});console.log(5); //const p2 new Promise((reslove) {console.log(6); //reslove();});p2.then(() {console.log(7);});// 1 3 5 6 4 7 2注意setTime是宏任务所以排到后面了
题目9 function testAsy(x) {return new Promise((resolve) {setTimeout(() {resolve(x);}, 3000);});}async function testAwt() {let result await testAsy(hello world);console.log(result); // 3秒钟之后出现hello worldconsole.log(cuger); // 3秒钟之后出现cug}testAwt();console.log(cug); //立即输出cug题目10 console.log(script start);let promise1 new Promise(function (resolve) {console.log(promise1);resolve(resolve!); // 注意这里console.log(promise1 end);}).then(function (res) {console.log(promise2);console.log(res); // 注意这里});setTimeout(function () {console.log(settimeout);});console.log(script end);
