window.requestIdleCallback()で優先度の低い処理を遅らせる

window.requestIdleCallback() は、優先度の低い関数をブラウザのアイドル時に実行させるためのAPIです。まだ実験的なステータスですが、2019年1月現在、Chrome、Firefox、Opera等で利用可能です。

使用例

下記のサンプルコードをご参照ください。引数で、実行させたい関数と、オプションとしてタイムアウト値を指定しています。

Chrome version 71で実行すると、3秒経過後、下記のログがコンソールに出力されます。

解説

処理のおもな流れは下記の通りです。

  1. 関数を3つキューに登録する
  2. 3秒(疑似的に)スリープする
  3. タイムアウト値として1秒を指定した関数が最初に実行される
  4. タイムアウト値として2秒を指定した関数が次に実行される
  5. タイムアウト値を指定していない関数が最後に実行される

タイムアウトした関数が、タイムアウトした順番に実行されるのは、なるほどと思いました(将来的に挙動が変わる可能性はありますが)。

使いどころ

使いどころは色々あると思います。たとえば、下記のような部分です。

  • 表示に関係ないトラッキング処理を遅らせる
  • ファーストビュー外のコンテンツ取得処理を遅らせる

うまく活用して、ユーザ体験を向上させていきましょう。