嘘

之前讲了个手写Promise，有人提出手写Promise很遗憾不能将promise.then写成microtask，只能用setTimeout来模拟异步，所以这次来讲一下microtask和macrotask

一、task 和 microtask

先理解一下task（宏任务又称macrotask）和microtask（微任务）。

• task有setTimeout、setInterval、setImmediate（node，IE10+）、I/O（node）、UI rendering(网页UI View渲染)等
• microtask有process.nextTick（node）、Promises.then（es6）、 Object.observe(废弃)、 MutationObserver(HTML5监听DOM变化)
• task 被放置于task queue(宏任务队列)；microtask被放置于microtask queue（微任务队列）
• 在浏览器中，通俗来讲microtask queue 独立于task queue，有microtask就先执行microtask，没有就执行task，详细可阅读这篇文章

二、queue（队列）和stack（栈）

然后了解一下queue和stack

• queue(队列) 先进先出
• stack(栈) 函数执行 先进后出 1->2->3依次执行后，从3->2->1释放（销毁）

function one(){console.log(1);function two(){console.log(2);function three(){console.log(3);}three();} two();
}
one();
复制代码

三、浏览器的事件环

1、所有的同步任务全在主线程上执行，形成一个执行栈

2、主线程之外存在一个执行队列

• 主线程上的所有异步方法（ajax、setTimeout、setImmedaite、MessageChannel），都会在有结果后（回调），放置（回调函数）在任务队列上

3、主线程（执行栈）任务全部完成后，系统读取任务队列放入执行栈上依次执行

4、主线程从任务队列中读取事件，这个过程是循环的

四、node事件环

如图（画了好久。。）

• 第一个是定时器（timers）队列（执行完毕或最大数量时【队列清空后】，到下一个阶段）
• 第二个i/o tcp 流 错误处理（错误回调放入，忽略）
• 第三个内部队列（忽略忽略）
• 第四个poll轮询队列（文件操作），一直在这个阶段等待，等定时器到达时间，执行对应的回调
• 第五个check队列，执行node的task，检查setImmediate
• 第六个关闭例如tcp的队列（继续忽略）
• promise.then、process.nectTick之类的microtask，会在当每一个阶段切换时，执行
• 第一次执行，微任务会先执行一次，典型如proxess.nextTick()

1、

setTimeout(()=>{console.log('timeout');
},0);
Promise.resolve().then(data=>{console.log('promise1');
});
setImmediate(()=>{console.log('immediate')
});
Promise.resolve().then(data=>{console.log('promise2');
});
process.nextTick((()=>{console.log('nectTick');
}));
复制代码

nectTick -> promise1 -> promise2 -> timeout -> immediate

• microtask先执行一次，nextTick最先执行，输出nextTick
• 再执行promise，输出promise1、promise2
• 执行timers队列，输出timeout
• 执行check队列，输出immediate

2、

setTimeout(()=>{console.log('timeout1');
},0);
setTimeout(()=>{Promise.resolve().then(data=>{console.log('promise');});console.log('timeout2');
},0);
process.nextTick((()=>{console.log('nectTick');
}));
复制代码

nectTick -> timeout1 -> timeout2 -> promise

因为在setTimeout执行完后到下一个阶段时，执行微任务

五、浏览器事件环和node事件环的区别

console.log('script start');
Promise.resolve().then(data=>{console.log('promise1');setTimeout(()=>{console.log('timeout1');},0);
});
setTimeout(()=>{console.log('timeout2');Promise.resolve().then(data=>{console.log('promise2');});
},0);
console.log('script end');
复制代码

在浏览器中

• 先执行log，打印出script start
• 然后将promise1的then里面的回调函数存放于microtask queue中
• 再把timeout2的回调函数存放在task queue中
• 执行log，打印出script end

在队列执行完毕后

• 我们先执行microtask queue内的函数log，打印出promise1
• 然后将setTimeout2放入task queue
• microtask queue还有内容吗？没有了，我们就执行task queue
• 执行task queue的setTimeout2的回调，打印出timeout2
• setTimeout2的回调又声明了promise2，我们就把promise2的then存放于microtask queue中

有microtask就执行microtask

• 所以先执行microtask queue中的回调log，打印出promise2
• 最后的最后，执行task queue中的回调log，打印出tiemout1

在node中

• 先打印出script start，promise1回调放入microtask queue，timeout2回调放入task queue，打印出script end
• 然后和浏览器一样执行microtask queue内的函数log，打印出promise1
• 将setTimeout2放入task queue
• 执行task queue的setTimeout2的回调，打印出timeout2
• 将promise2的then存放于microtask queue中

在node中，此时timers执行完了吗？并没有

• 所以执行task queue的回调log，打印出timeout1
• 最后在队列切换（timers切换到下一队列）时，执行microtask queue的回调log，打印出promise2

但是多试几次，发现结果可能有两种

造成timeout1和promise2的原因是无法比较then的回调和timeout1的执行速度，所以这么写是没有意义的。 如以下代码

Promise.resolve().then(data => {console.log('p1');setTimeout(() => {console.timeEnd('t1');},0);
});
setTimeout(() => {console.log('t2');console.time('t1');console.time('p2');Promise.resolve().then(data => {console.timeEnd('p2');});
},0);
复制代码

六、node的其他task

node中的task有setTimeout、setInterval、setImmediate、I/O等

下面是个经典面试题

const fs = require('fs');
fs.readFile('./1.txt','utf8',(err,data)=>{console.log('success');setTimeout(()=>{console.log('timeout'); },0);setImmediate(()=>{console.log('immediate');});
})
复制代码

这段代码执行顺序为 success -> immediate -> timeout。

因为在node事件环内在fs所在的poll队列后，只能执行check队列（setImmediate），只有在下一个循环，才走timers队列。

七、总结

1、浏览器中，有microtask，优先执行microtask，没有就执行task。

2、node中，由于node事件环，microtask只在改变队列时执行。task按照node事件环执行

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！