各位看官我们又见面了，这几天刚和媳妇拍完结婚照回来了，晒得跟非洲的猴子一样~

        总算有点时间了，打算再写一篇博文，来扫一下我之前对异步队列的盲点，同时论证一下异步更新在Dom优化时所起到的作用。

        从前，在我的认知里，js这个单线程的语言如果想做异步操作（ajax，setTimeout，onclick）的话，就需要将所有的异步事件安排到一组事件队列中去，当主线程的代码全部跑完，再从队列中的去一个个执行异步事件。我觉得与其叫做异步，倒不如叫它事件补充精准吧~

                                                                                                                    —— 高级装B工程师 Yubble

        以上的结论还是没有问题的，不管去哪面试对方一问到异步只要回答出上面这一段话效果就都是ok的（来自在下面试各大一线互联网公司的亲身经历，呜呜呜~）

        但是！我们是脱离了低级趣味的人，我是提倡装就要装出高逼格的人，如果客爷您能滔滔不绝的说出异步队列中包含的两种队列：macro (宏任务队列) 和 micro (微任务队列)，那您很有可能成为面试官钦点的Mr.Right了，

        大风起兮云飞扬~道是无晴却有晴

        首先看看这两种异步事件的成员吧

        常见的Micro-Task事件：process.nextTick（nodeJs）、Promise、MutationObserver 等。

        常见的Macro-Task事件：setTimeout、setInterval、 setImmediate（nodeJs）、script（整体代码）

        有没有觉得Macro-Task的事件都眼熟，Micro-Task的事件都脸儿生，也就是说在Promise，MutationObserver这些h5新特性问世之前，异步队列一直都是Macro-Task一家说了算，就是我们以前说的任务队列（task queue）！

        那么问题来了，这哥儿俩都是异步事件，在一次事件循环的过程中谁先谁后呢？首先我们来看一张Event Loop的周期示例图：

        是不是刚一看有点懵，在下刚开始看到这张图的时候是这样的

        先不要轻易放弃哦我的小可爱们，我们先简单的归纳一下这一次事件循环的周期都做了什么。

        1，首先浏览器将macro队列中的 一个任务 单独出列执行了，是一个任务哦

        2，执行完毕后紧接着micro队列抛出 所有任务 依次执行，是所有micro任务哦

        3，到了这个节点，如果异步函数中有对于dom的操作，便可以执行了，dom变化了就会引起浏览器的回流与重绘

        4，将worker线程中的任务释放执行出来，这里就不多说了~

        他们的区别是很明显的对吗？在每一次的事件循环中macro的事件队列是一个个的执行的，然而每执行完一个macro事件都会将所有的micro事件一同执行，紧接着立即去做dom的变化~

        我们来简单的做一个验证喉，我将macro异步的代表 setTimeout 与micro异步的代表 promise 穿插着写在一起

        这里也就不卖关子了，正确的输出是

        一目了然，不论我们将同一域中的macro和micro以什么顺序编写，micro的执行顺序都会在macro之前，并且是将所有的micro事件一起出队。

        这位客爷问了，“上面不是说先执行macro的事件，再执行micro事件吗，你这个怎么micro比macro要优先呐？”，特别好，您能看到这里我很有成就感，这是因为script标签本就在macro队列之中！下面在下就用我平时最通俗的大碴子话来给各位看官叙述一下这几行代码在浏览器运行时的过程：

        1， 浏览器运行到<script>的状态：调用栈空。micro队列为空，macro队列中只有一个script脚本（包含script的全部内容）

        2，<script>的代码开始执行，在执行script代码中内容的时候，将所有的异步代码分成了macro与micro，并分别进入队列。等待同步代码全部执行完成

        3，检测到macro队列中有事件在排队，第一个等待出队的是<script>。注意了，此时是script从macro出队了。

        4，执行完一个macro任务，就该将整队的micro任务出队执行了吧，于是乎在同步代码执行时被写入micro队列中的所有Promise就一窝蜂的跑了出来。

        5，之后开始进行异步回调中的dom操作，触发浏览器渲染，执行worker，完成一个闭环。紧接着执行下一个macro异步事件(setTimeout)

        所以我们能够清楚的是，macro队列中有多少异步事件，我们的浏览器就要走多少次的3，4，5。

        结论：

                经过了一番折腾我想各位客爷也明白我想表达的意思了，如果我们想要在同步代码执行完成之后用异步的方式来更新dom，尽量要写在micro的异步事件中去，他是可以第一时间将dom变化触发渲染的，你来了吗田利小哥，不要再把异步更新dom写到setTimeout上去啦。

                如果各位客爷使用过vue的nextTick的话，不妨看一看它的源码，在异步更新dom上，它就是这么优化的，上图~

                闲聊几句吧，最近我的第一个小程序正在做备案，马上就要上线啦，打算用这个跟我女朋友求婚一举拿下，哈哈，来自程序员的浪漫~

                最后祝各位新年快乐，来年发大财，家家大丰收