HTML：活文档标准

要连续运行几个毫秒的任务而没有任何延迟，同时仍然向浏览器让出控制权以避免使用户界面饿死（并避免浏览器因占用 CPU 而终止脚本），只需在执行工作之前排队下一个定时器即可

function doExpensiveWork() {
  var done = false;
  // ...
  // this part of the function takes up to five milliseconds
  // set done to true if we're done
  // ...
  return done;
}

function rescheduleWork() {
  var id = setTimeout(rescheduleWork, 0); // preschedule next iteration
  if (doExpensiveWork())
    clearTimeout(id); // clear the timeout if we don't need it
}

function scheduleWork() {
  setTimeout(rescheduleWork, 0);
}

scheduleWork(); // queues a task to do lots of work

使用 queueMicrotask() 最常见的原因是创建一致的顺序，即使在同步可用信息的情况下，也不引入不必要的延迟。

例如，考虑一个自定义元素触发 load 事件，该事件还维护先前加载数据的内部缓存。一个简单的实现可能如下所示

MyElement.prototype.loadData = function (url) {
  if (this._cache[url]) {
    this._setData(this._cache[url]);
    this.dispatchEvent(new Event("load"));
  } else {
    fetch(url).then(res => res.arrayBuffer()).then(data => {
      this._cache[url] = data;
      this._setData(data);
      this.dispatchEvent(new Event("load"));
    });
  }
};

但是，这个简单的实现存在问题，因为它会导致其用户体验不一致的行为。例如，如下代码

element.addEventListener("load", () => console.log("loaded"));
console.log("1");
element.loadData();
console.log("2");

有时会记录“1, 2, loaded”（如果需要获取数据），有时会记录“1, loaded, 2”（如果数据已缓存）。类似地，在调用 loadData() 之后，元素上是否设置数据将不一致。

为了获得一致的顺序，可以使用 queueMicrotask()

MyElement.prototype.loadData = function (url) {
  if (this._cache[url]) {
    queueMicrotask(() => {
      this._setData(this._cache[url]);
      this.dispatchEvent(new Event("load"));
    });
  } else {
    fetch(url).then(res => res.arrayBuffer()).then(data => {
      this._cache[url] = data;
      this._setData(data);
      this.dispatchEvent(new Event("load"));
    });
  }
};

通过实质上重新安排排队的代码使其位于 JavaScript 执行上下文栈 清空之后，这确保了元素状态的一致顺序和更新。

另一个有趣的 queueMicrotask() 用法是允许多个调用者非协调地“批量”处理工作。例如，考虑一个库函数，该函数希望尽快将数据发送到某个位置，但如果很容易避免，则不想发出多个网络请求。平衡这一点的一种方法如下所示

const queuedToSend = [];

function sendData(data) {
  queuedToSend.push(data);

  if (queuedToSend.length === 1) {
    queueMicrotask(() => {
      const stringToSend = JSON.stringify(queuedToSend);
      queuedToSend.length = 0;

      fetch("/endpoint", stringToSend);
    });
  }
}

使用此架构，当前正在执行的同步 JavaScript 中对 sendData() 的多次后续调用将被批量组合到一个 fetch() 调用中，但没有中间的事件循环任务抢占获取（就像使用类似的代码并且改为使用 setTimeout() 时会发生的那样）。