前端架构系列

eventLoop 宏任务与微任务

2020-07-06  本文已影响0人  羽晞yose

最近一直准备面试,所以在过架构相关的基础知识(会涉及较多底层),会把很多基础知识都写出来,不过没办法什么都写,主要是因为时间原因,毕竟今年的行情…希望尽早有份工作吧

因为上一篇promise里面很多题都涉及到了微任务和宏任务,所以这里就简要的概述一下:

浏览器会先执行清空主栈里的EC(非global),直到全部清空后再去执行清空微任务,微任务清空完才会执行宏任务,微任务与宏任务都是异步的,这也是vue中nextTick的实现原理,主要也是使用了事件循环。(但要注意NodeJs11以下并非与浏览器一致)。


vue\src\core\util\next-tick.js 源码

微任务(microtask)

async/awaitPromise.thenObject.observeMutationObserver

宏任务(macroTask)

绑定事件(如click),setTimeoutsetIntervalajax

具体可以参考下面这篇文章,此篇只做一个概括总结:
浏览器和Node不同的事件循环

练习题1:

setTimeout(() => {
    console.log(1);
}, 20)

console.log(2);

setTimeout(() => {
    console.log(3);
}, 10);

console.time(4);

for(let i =0; i < 900000000; i++) {}

console.timeEnd(4);

setTimeout(() => {
    console.log(6);
}, 8)

console.log(7);

setTimeout(() => {
    console.log(8);
}, 15)

console.log(9);

// 2, 7, 9, 3, 1, 6, 8

练习题2:

console.log(1);

setTimeout(() => {
    console.log(2);
}, 50);

console.log(3);

setTimeout(() => {
    console.log(4);
    while(1===1){} // 导致浏览器崩溃,需要自己手动去任务管理器里结束进程
}, 0)

console.log(5);

/*
 * 输出结果
 * 'script start'
 * 'async1 start'
 * 'async2'
 * 'promise1'
 * 'script end'
 * 'async1 end'
 * 'promise2'
 * 'setTimeout'
 */
上一篇下一篇

猜你喜欢

热点阅读