每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day24

tags: ItIron2021 Javascript

前言

对点进来的你说一下，恭喜你撑到今天! 非同步的最後一个问题，之後的最後几天就会进入到一些比较零碎的应用题目罗! 马上来看一下最後的非同步题目吧! 顺带一提，这个题目我後来才发现原来是之前在it邦的另一个铁人赛系列文就有看过了..面试官可以不要直接把看到的题目拿来考吗，至少换个例子吧! 文章连结我会附在最後，是个非常棒的系列文!

本日题目与解释

请问下方的程序码输出结果为?

setTimeout(() => alert("timeout"));

Promise.resolve()
  .then(() => alert("promise"));

alert("global ex. context");

看到这边你应该迫不及待的要回答了，这很简单嘛!

阿不就考同步 VS 非同步的执行顺序，event loop我被虐了几次了还不懂吗?

先处理同步程序码再处理非同步就好了嘛! 跳出的alert顺序肯定是这样的!

global ex. context
timeout
promise

但实际上却是....

global ex. context
promise
timeout

你现在的心情大概是这样吧，我懂

其实原因是因为浏览器在处理非同步时其实还有细节我们之前没有提到，就是所谓的macro task & micro task，这两个名词中文老样子没有我特别满意的翻译(许多人叫宏任务&微任务，但..我听不习惯)，下面还是就用原文来说明吧!

老样子解释观念不是我的重点，这边只是简单的说明!
实际上浏览器在执行程序码时会是以下的流程

简单来说就是分同步任务又再细分为macro task & micro task

常见的macro task有

• 滑鼠、键盘事件
• setTimeout/setInterval
• 执行script

而常见的micro task有

• promise(注意，是取值的部份，也就是.then & .catch才是非同步)
• DOM操作

两种任务的执行时间点并不相同，每执行完一个macro task，它就会停下来看一下micro task queue中是不是有还没执行的micro task并一口气将全部的micro task执行完! 接着在继续跑渲染之类的流程後再次执行下一个macro task，并反覆这样的流程，所以简单来说

可在一次的event loop就执行多个micro task，但只能执行一个macro task

所以只要能分辨macro task/micro task就没有问题罗! 理解这点之後回头看一下题目，promise取值很明显属於micro、而setTimeout属於macro，但别忘记执行script也算一个macro task，也就是说流程是这样的

   run script (跑完一个macro task，该清空micro task queue了)
=> promise (清空micro task queue，该跑下一个macro task了)
=> setTimeout

最终就造成你看到的结果罗，是不是没有想像中这麽难懂呢?

今天会附上两篇很棒的文章，若想进一步了解相关观念或题目我是非常推荐的!

本日核心观念与总结

核心观念

macro task vs micro task、event loop

总结

• 了解那些属於macro task & micro task
• 了解两者在执行时间点上的差别
• 了解一个loop中只能执行一个macro task，但micro task可以执行多个

推荐文章

JS 原力觉醒Day15 - Macrotask 与MicroTask

聊聊JavaScript非同步中的macrotask和microtask

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!