前端优化之异步更新(Micro-Task&Macro-Task)

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

        总算有点时间了，打算再写一篇博文，来扫一下我之前对异步队列的盲点，同时论证一下异步更新在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， 浏览器运行到