事件队列：micro Task queue （微队列 ） 和 macro Task queue （宏队列）

事件队列

• 实际上有两个事件队列
  
  

---

micro Task queue 微队列

• 类似于VIP用户

• 执行栈执行优先拿微队列里的待执行函数

---

macro Task queue 宏队列

• 类似于普通用户，需要排队
• 等微队列的待执行函数全部清空后，才会往宏队列中拿取待执行函数

---

什么函数进入微队列，什么函数进入宏队列？

• macro Task queue 宏队列
  • 计时（的回调函数）函数、事件函数会直接进入到宏队列

• micro Task queue 微队列
  • MutationObserver ——>微队列

备注：仅举个别事例说明，不是全部

---

什么是 MutationObserver？

• MutationObserver是创建一个观察者
• 当new 一个观察者实例时，执行栈会发通知给Web API ,Web API 会一直观察被绑定元素，并记录待执行的函数
• 当观察的元素被改变时，会触发待执行函数从Web API 进入微队列
• 等待执行栈空闲下来，优先执行微队列中的待执行函数

---

举例

问：下面代码输出什么？

html代码如下：

<div id="app"></div>

JS代码如下：

var app = document.getElementById('app');
      setTimeout(() => {
        console.log(1);
      }, 0);
      const observer = new MutationObserver(() => {
        console.log(2);
      });
      observer.observe(app, {
        attributes: true, //监听属性的变化
        childList: true, //监听子元素的变化
        subtree: true, //监听子树的变化
      });
      app.innerHTML = 'Hello';
      console.log(3);

答： 3 2 1