当前位置: 首页 > Web前端 > HTML5

这次十分钟搞清楚宏观任务和微观任务

时间:2023-04-05 17:35:46 HTML5

你为什么写这篇文章?这是大大小小的工厂的面试官都喜欢问的问题。很多面试官和面试官都不知道标准答案是什么。互联网上有各种各样的文章。它误导了很多人,包括我。或者今天花十分钟澄清他。让我们先从代码开始。functionapp(){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");});});}应用程序();输出:1-21-31-12-13-1开始分析interviewerspecial我喜欢问:告诉我什么是微任务和宏任务。大多数面试官不知道微任务和宏任务是什么。不信下次再问所谓的microtasks和macrotasks。Macrotasks:常用定时器、用户交互事件等。(宏任务是具体的任务,没有什么特殊意义)微任务:Promise相关的任务,MutationObserver等(一样的,只是一个名字!!!)先执行微任务还是先执行宏任务?鸡还是先来?先有宏任务还是微任务?第一个原则是万事俱备退出全局上下文,全局同步代码结束计时开始。例如,我们刚才的代码:functionapp(){setTimeout(()=>{console.log("1-1");Promise.resolve().then(()=>{console.log("2-1");});});控制台日志(“1-2”);承诺。解决()。然后(()=>{console.log("1-3");setTimeout(()=>{console.log("3-1");});});}应用程序();当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)})})重点:每个宏任务对应一个单独的微任务队列。遇到面试题,按照我的套路,在退出全局上下文之前(执行全局同步代码后),开始收集当前层级的microtasks和macrotasks,然后先清空microtask队列,再执行macrotasks。如果这期间遇到macrotasks/microtasks,像我一样画图,塞进相应的level。最后写简单的1000字。相信可以彻底解决你对微任务和宏观任务的疑惑。想要更深入的了解,记得关注公众号。以后会写一些更深入的东西。