轻松理解JavaScript的宏任务和微任务
目录
为什么写这个文章呢?这是一道大厂、小厂面试官都喜欢问的题目,很多面试官和面试者也不知道什么是标准答案,所以导致网上各种文章层次不齐..误导过不少人,也包括,虽然之前我简答总结过一篇关于这方面的文章(如何理解 EventLoop 的宏任务和微任务),但是还不是易懂,当时也是为了对付面试,简单总结一下,正好最今不忙,所以又要花点时间彻底明白 JavaScript 的宏任务和微任务。
正式开始
先上代码:
function app() { setTimeout(() = >{ console.log("1-1"); Promise.resolve().then(() = >{ console.log("2-1"); }); }); console.log("1-2"); Promise.resolve().then(() = >{ console.log("1-3"); setTimeout(() = >{ console.log("3-1"); }); }); } app();
输出结果:
1-2 1-3 1-1 2-1 3-1
开始分析
面试官特别喜欢问:你讲讲什么是微任务和宏任务
大部分面试官其实自己也不懂什么是微任务和宏任务,不信下次你们反问一下
所谓微任务和宏任务
宏任务:常见的定时器,用户交互事件等等.(宏任务就是特定的这些个任务,没什么特殊含义)
微任务:Promise
相关任务,MutationObserver
等(一样,只是一种称呼而已!!!
)
到底先执行微任务还是宏任务
先有鸡还是先有蛋? 到底是先有宏任务还是微任务啊?
第一个原则
- 万物皆从全局上下文准备退出,全局的同步代码运行结束的这个时机开始
- 例如我们刚才这段代码:
function app() { setTimeout(() = >{ console.log("1-1"); Promise.resolve().then(() = >{ console.log("2-1"); }); }); console.log("1-2"); Promise.resolve().then(() = >{ console.log("1-3"); setTimeout(() = >{ console.log("3-1"); }); }); } app();
- 当执行完了
console.log("1-2");
的时候,意味着全局的上下文马上要退出了,因为此时全局的同步代码都执行完了,剩下的都是异步代码
第二个原则
- 同一层级下(
不理解层级,可以先不管,后面会讲
),微任务永远比宏任务先执行 - 即 Promise.then 比 setTimeout 先执行
- 所以先打印
1-3
,再打印1-1
第三个原则
- 每个宏任务,都单独关联了一个微任务队列
- 简单画一张图,大家就知道什么是层级了
- 每个层级的宏任务,都对应了他们的微任务队列,微任务队列遵循先进先出的原则,当全局同步代码执行完毕后,就开始执行第一层的任务。同层级的微任务永远先于宏任务执行,并且会在当前层级宏任务结束前全部执行完毕
怎么分辨层级?
- 属于同一个维度的代码,例如下面的
func1 和 func2
就属于同层级任务
setTimeout(func1)... Promise.resolve().then(func2)...
- 下面这种
fn1 和 fn2
就不属于同一个层级的,因为 fn2 属于内部这个setTimeout
的微任务队列,而fn1
属于外部setTimeout
的微任务队列
setTimeout(() = >{ Promise.resolve().then(fn1) setTimeout(() = >{ Promise.resolve().then(fn2) }) })
划重点:每个宏任务对应一个单独的微任务队列
遇到面试题
就按照我的套路,从全局上下文退出前(全局的同步代码执行完毕后),开始收集当前层级的微任务和宏任务,然后先清空微任务队列,再执行宏任务.如果这期间遇到宏任务/微任务,就像我这样画个图,把他们塞进对应的层级里即可
写在最后
简单的 1000 字,相信能彻底解决你的微任务和宏任务疑惑,如果你想理解得更深,记得关注下码云笔记公众号,后续会写一些更深入的东西,真正的“深入浅出”
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 轻松理解JavaScript的宏任务和微任务
码云笔记 » 轻松理解JavaScript的宏任务和微任务