无锡找做网站,江苏建设是国企吗,金泉网普通会员可以建设网站吗,重庆活动轨迹公布目录 简介微任务与宏任务的基本概念宏任务#xff08;Macrotasks#xff09;微任务#xff08;Microtasks#xff09;宏任务示例微任务示例微任务与宏任务的执行时序 结论 简介 在JavaScript的异步编程中#xff0c;理解事件循环#xff08;Event Loop#xff09;是至关… 目录 简介微任务与宏任务的基本概念宏任务Macrotasks微任务Microtasks宏任务示例微任务示例微任务与宏任务的执行时序 结论 简介 在JavaScript的异步编程中理解事件循环Event Loop是至关重要的。事件循环机制确保了JavaScript的单线程能够处理高并发的异步任务。 微任务Microtasks和宏任务Macrotasks是事件循环中的两种主要任务类型。 本文将介绍这两种任务的区别并通过代码示例深入探讨它们的工作机制帮助您掌握前端异步编程的核心概念。 微任务与宏任务的基本概念 JavaScript的事件循环由任务队列组成任务队列分为两种微任务队列和宏任务队列。每个宏任务执行完毕后JavaScript引擎会先执行所有微任务队列中的任务然后再执行下一个宏任务。 宏任务Macrotasks
宏任务通常指的是那些会在事件循环的单独迭代中执行的任务它们包括
整体脚本执行整个JavaScript文件或脚本标签作为首次宏任务执行。setTimeout 和 setInterval设定的定时器到期后会作为宏任务被添加到宏任务队列。setImmediate (Node.js 特有)在Node.js中setImmediate用于在当前事件循环结束时执行。I/O包括从网络、文件系统等进行的输入/输出操作。UI 渲染浏览器将计算好的DOM更新渲染到屏幕上。requestAnimationFrame用于动画的帧同步会在下一次重绘之前执行。
微任务Microtasks
微任务在当前宏任务完成后立即执行它们包括
Promise 回调Promise 的 .then(), .catch(), 和 .finally() 方法。MutationObserver用于监听DOM树变化的API当DOM变化时触发。queueMicrotask一个标准的API允许开发者显式地将函数排入微任务队列。process.nextTick (Node.js)在Node.js中process.nextTick 用于延迟函数的执行直到当前操作结束但它会在当前执行栈清空之后下一次事件循环之前执行。
宏任务示例 尽管setTimeout的延迟时间设置为0它仍然是一个宏任务会在当前宏任务执行完毕后下一个事件循环迭代中执行。 console.log(Script start);setTimeout(function() {console.log(setTimeout);
}, 0);console.log(Script end);输出
Script start
Script end
setTimeout微任务示例 Promise 的then回调是微任务它们会在当前宏任务的所有代码执行完毕后立即执行。 console.log(Script start);Promise.resolve().then(function() {console.log(promise1);
}).then(function() {console.log(promise2);
});console.log(Script end);输出
Script start
Script end
promise1
promise2微任务与宏任务的执行时序 在这个示例中我们可以看到Promise的微任务在当前宏任务的代码执行完毕后立即执行而两个setTimeout的宏任务则在下一个事件循环迭代中执行。 console.log(Script start);setTimeout(function() {console.log(setTimeout);
});Promise.resolve().then(function() {console.log(promise1);
});setTimeout(function() {console.log(setTimeout2);
}, 0);console.log(Script end);输出
Script start
Script end
promise1
setTimeout2 (next event loop iteration)
setTimeout结论
微任务和宏任务是JavaScript异步编程的基石。微任务提供了一种更快的异步处理方式通常用于快速连续的异步操作而宏任务则包括了更广泛的异步事件。
