事件循环

[huoxiangdong]

事件队列

• task 宏任务队列：每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）

  • 主要包含：setTimeout、setInterval、setImmediate、I/O、UI交互事件
  • 每一个task会从头到尾将这个任务执行完毕，不会执行其它
  • 浏览器为了能够使得JS内部task与DOM任务能够有序的执行，会在一个task执行结束后，在下一个 task 执行开始前，对页面进行重新渲染 task->渲染->task->...

• microtask 微任务队列：可以理解是在当前 task 执行结束后立即执行的任务

  • 主要包含：Promise、process.nextTick、MutaionObserver
  • 也就是说，在当前task任务后，下一个task之前，在渲染之前
  • 所以它的响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染
  • 也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）

另外，请注意下Promise的polyfill与官方版本的区别： 官方版本中，是标准的microtask形式 polyfill，一般都是通过setTimeout模拟的，所以是macrotask形式 请特别注意这两点区别 注意，有一些浏览器执行结果不一样（因为它们可能把microtask当成macrotask来执行了）， 但是为了简单，这里不描述一些不标准的浏览器下的场景（但记住，有些浏览器可能并不标准）

[huoxiangdong]

• 事件循环机制就是基于事件触发线程的

[huoxiangdong]

异步执行线程

• JS引擎线程
• 事件触发线程
• 定时触发器线程

[huoxiangdong]

异步执行

• JS分为同步任务和异步任务
• 同步任务都在主线程上执行，形成一个执行栈
• 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
• 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行

[huoxiangdong]

[huoxiangdong]

• 主线程运行时会产生执行栈，
• 栈中的代码调用某些api时，它们会在事件队列中添加各种事件（当满足触发条件后，如ajax请求完毕->异步线程执行）
  • ？比如在队列里创建一个ajax请求事件，ajax请求由http异步线程执行，等请求完成返回结果，在队列里添加一个事件
• 而栈中的代码执行完毕，就会读取事件队列中的事件，去执行那些回调 如此循环
• 注意，总是要等待栈中的代码执行完毕后才会去读取事件队列中的事件

[huoxiangdong]

定时器

• 当使用setTimeout或setInterval时，它需要定时器线程计时，计时完成后就会将特定的事件推入事件队列中

[huoxiangdong]

使用MutationObserver实现microtask

• MutationObserver可以用来实现microtask(它属于microtask，优先级小于Promise， 一般是Promise不支持时才会这样做）
• 它是HTML5中的新特性，作用是：监听一个DOM变动，当DOM对象树发生任何变动时，Mutation Observer会得到通知
• 像以前的Vue源码中就是利用它来模拟nextTick的，具体原理是，创建一个TextNode并监听内容变化， 然后要nextTick的时候去改一下这个节点的文本内容， 如下：（Vue的源码，未修改）

  
  var counter = 1
  var observer = new MutationObserver(nextTickHandler)
  var textNode = document.createTextNode(String(counter))

observer.observe(textNode, { characterData: true }) timerFunc = () => { counter = (counter + 1) % 2 textNode.data = String(counter) }

不过，现在的Vue（2.5+）的nextTick实现移除了MutationObserver的方式（据说是兼容性原因），
取而代之的是使用MessageChannel
（当然，默认情况仍然是Promise，不支持才兼容的）。

MessageChannel属于宏任务，优先级是：setImmediate->MessageChannel->setTimeout，
所以Vue（2.5+）内部的nextTick与2.4及之前的实现是不一样的，需要注意下。