HTML: The Living Standard

遅延なく背中合わせに数ミリ秒のタスクを実行するために、飢えたユーザーインターフェイスを避けるために（および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()のもう1つの興味深い使用法は、 複数の呼び出し元による作業の調整されていない"バッチ処理"を可能にすることである。たとえば、できるだけ早くどこかにデータを送信したいが、簡単に回避できる場合は、 複数のネットワークリクエストを行いたくないライブラリ関数について考えてみる。このバランスをとる1つの方法は次のようになる：

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()を呼び出す複数の後続の呼び出しは、1つのfetch()呼び出しにまとめられるが、イベントループのタスクがフェッチを先取りすることはない（代わりに同様のコードで発生した場合のようにsetTimeout()を使用する）。