跳到主要内容

为什么有微任务

· 阅读需 3 分钟

需要明确的是，微任务不是因为 Promise 才出现的。

微任务出现的原因，可以看这个 youtube 上的视频。

简单来说就是: 微任务是为了监听 dom, 而作为 MutationObserver 的实现出现的。

为什么 MutationObserver 用微任务实现？

考虑这么一段代码

// 因为冒泡特性，回调事件会成倍的触发
document.body.addEventListener('DOMNodeInserted', () => {
  console.log('inserted')
})

for (let i = 0; i < 10; i++) {
  const span = document.createElement('span')
  document.body.appendChild(span)
  span.textContent = 'hello' // 这里会导致二次触发回调事件
}

如果使用 addEventListener 来监听，因为事件冒泡的特性，回调函数很有可能会因为一段很小的副作用而成本的触发。

实际上想要的监听是类似于现在 Vue 和 React 做的优化，批量更新，

就是希望浏览器不是马上执行回调函数，而是"等一会"再执行一次就够了。当然，这里等一会还是希望在浏览器渲染之前的。

所以才有了微任务！

1. 微任务 和 Promise 的关系是什么？​

最早 Promise 是社区开发者自己实现的，然后出现了 Promise/A+ 标准，并规定了一系列 API，并配有大量的测试用例，

后来 Promise 库的开发人员为了尽可能快的执行 Promise 回调事件，并找到了在微任务队列中实现的办法，

有人提交过建议在 ECMAScript 规范中提高 Promise 的执行优先级，但被拒绝了，

是后来 html5 规范指定 Promise 是进入微任务队列，

最终，指定微任务队列的决定是由杰出的开发人员和公司根据他们的专家意见做出的。

参考​

标签：