微队列的几种实现方法

🌺 摘要
整理微任务队列的几种实现方式,并比较它们的执行差异。

微队列的几种实现方法

官方API(较新)

 queueMicrotask(callback);

使用Promise

 Promise.resolve().then(callback)

node环境

process.nextTick(callback);

*ps:process.nextTick的优先级比微任务高,可以当作微任务

MutationObserver API

      const ob = new MutationObserver(callback);
      const textNode = document.createTextNode("1");
      ob.observe(textNode, {
        characterData: true,
      });
      textNode.data = "2";

兼容写法

if (typeof queueMicrotask !== 'function') {
 queueMicrotask = (callback) => {
    Promise.resolve().then(callback);
  };
}

// 使用
queueMicrotask(() => console.log('微任务'));
文章发表于 2026-04-14 16:00:00
作者: 徐徐
文章标题: 微队列的几种实现方法
版权声明: 内容遵守许可协议,转载请注明出处。
扫码阅读原文