浏览器事件循环原理

通过一道题进入浏览器事件循环原理：

console.log('script start')
setTimeout(function () {
  console.log('setTimeout')
}, 0);
Promise.resolve().then(function () {
  console.log('promise1')
}).then(function () {
  console.log('promise2')
})
console.log('script end')

可以先试一下，手写出执行结果，然后看完这篇文章以后，在运行一下这段代码，看结果和预期是否一样

单线程

定义

 单线程意味着所有的任务需要排队，前一个任务结束，才能够执行后一个任务。如果前一个任务耗时很长，
 后面一个任务不得不一直等着。

原因

   javascript的单线程，与它的用途有关。作为浏览器脚本语言，javascript的主要用途是与用户互动，以及操作DOM。这
   决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定javascript同时有两个线程，一个在添加DOM节
   点，另外一个是删除DOM节点，那浏览器应该应该以哪个为准，如果在增加一个线程进行管理多个线程，虽然解决了
   问题，但是增加了复杂度，为什么不使用单线程呢，执行有个先后顺序，某个时间只执行单个事件。为了利用多核
   CPU的计算能力，HTML5提出Web Worker标准，运行javascript创建多个线程，但是子线程完全受主线程控制，
   且不得操作DOM。所以，这个标准并没有改变javascript单线程的本质

浏览器中的Event Loop

事件循环这个名字来源于它往往这么实现:

在这里插入代码片
while(queue.waitForMessage()) {
    queue.processNextMessage();
}

这个模型的优势在于它必须处理完一个消息(run to completion),才会处理下一个消息,使程序可追溯性更强。不像C语言可能随时从一个线程切换到另一个线程。但是缺点也在于此,若同步代码阻塞则会影响用户交互

macroTask和microTask

宏队列，macroTask也叫tasks。包含同步任务，和一些异步任务的回调会依次进入macro task queue中，macroTask包含:

• script代码块
• setTimeout
• requestAnimationFrame
• I/O
• UI rendering

微队列, microtask，也叫jobs。另外一些异步任务的回调会依次进入micro task queue，等待后续被调用，这些异步任务包含:

• Promise.then
• MutationObserver

一段javascript执行的具体流程就是如下：

1. 首先执行宏队列中取出第一个，一段script就是相当于一个macrotask,所以他先会执行同步代码，当遇到例如setTimeout的时候，就会把这个异步任务推送到宏队列队尾中。
2. 当前macrotask执行完成以后，就会从微队列中取出位于头部的异步任务进行执行，然后微队列中任务的长度减一
3. 然后继续从微队列中取出任务，直到整个队列中没有任务。如果在执行微队列任务的过程中，又产生了microtask，那么会加入整个队列的队尾，也会在当前的周期中执行
4. 当微队列的任务为空了，那么就需要执行下一个macrotask，执行完成以后再执行微队列，以此反复。
   总结下来就是不断从task队列中按顺序取task执行，每执行完一个task都会检查microtask是否为空，不让过不为空就执行队列中的所有microtask。然后在取下一个task以此循环