![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicGcq5yN3gTN581M1EDNxEjNyMDM5EDMy8CX2IzMwkTMwIzLcV2Zh1WavwFZlh2YhRHdh9CX0Z2bzRmbpt2Lc5WatRWYvwFdl5mLphnbplnL3d3dvw1LcpDc0RHaiojIsJye.jpg)
三、异步任务
1.MacroTask(宏观Task) setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering
2.MicroTask(微观任务) process.nextTick, Promise, Object.observe, MutationObserver
规范:
每个浏览器环境,至多有一个event loop。
一个event loop可以有1个或多个MacroTask queue,而仅有一个 MicroTask Queue。
一个task queue是一列有序的task, 每个task定义时都有一个task source,从同一个task source来的task必须放到同一个task queue,从不同源来的则被添加到不同队列。
tasks are scheduled,所以浏览器可以从内部到JS/DOM,保证动作按序发生。
Microtasks are scheduled,Microtask queue 在当前 task queue 的结尾执行。microtask中添加的microtask也被添加到Microtask queue的末尾并处理。
注: event loop的每个turn,是由浏览器决定先执行哪个task queue。这允许浏览器为不同的task source设置不同的优先级,比如为用户交互设置更高优先级来使用户感觉流畅。
四、实例
```javascript
function ELoop() { // 当前任务 let p = new Promise((resolve, reject) => { console.log("current Task") resolve(); }); let nextP;
setTimeout(() => { console.log("MacroTask_1"); nextP.then(() => { // 第一次执行时,这段代码并没有执行到。 console.log("MicroTask_promise_1"); //第一个MicroTask }) console.log("MacroTask_1 end") }, 0) // 第一个 MacroTask setTimeout(() => { console.log("MacroTask_2"); console.log("MacroTask_2 end") }, 0) // 第二个MacroTask nextP = p.then(() => { console.log("MicroTask_promise_2"); //第一个MicroTask }).then(() => { console.log("MicroTask_promise_3"); // 第二个MicroTask }) console.log("current Task end")}ELoop();
本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱qq2522407257。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云学院www.yx10011.com。