JavaScriptでバックグラウンドタスクをスケジュールする方法

コアポイント

• JavaScriptは、一度に1つのタスクしか実行できないブロッキング言語です。これにより、長期にわたるスクリプトがブラウザを反応させないようにする可能性があります。ただし、それほど重要ではないバックグラウンドタスクを、ユーザーエクスペリエンスに直接影響を与えることなく実行するようにスケジュールすることができます。
• requestIdleCallbackは、ブラウザがアイドル状態であるときに不必要なタスクをスケジュールできるAPIであり、requestAnimationFrameの機能と同様です。ブラウザがアイドル状態でなくても、タスクが設定されたタイム範囲内で実行されるように、タイムアウトオプションで使用できます。
• requestIdleCallbackは、ブラウザのサポートが限られている実験機能であり、予測不可能な時間を実行したり、約束のタスクを解決するタスクには適していません。 DOMへの直接アクセスを必要とするサポートされていないブラウザーまたはタスクの場合、WebワーカーまたはsetTimeoutなどの代替案を使用できます。

JavaScriptの他のすべてを忘れた場合は、常にこれを覚えておいてください。ブラウザを機能させる魔法の処理ウィザードを想像してください。 HTMLのレンダリング、メニューコマンドへの応答、画面の描画、マウスのクリックの取り扱い、JavaScript関数の実行など、これはすべて単一のスプライトで処理されます。私たちのほとんどと同様に、エルフは一度に1つしかできません。エルフに多くのタスクを投げた場合、それらは大きなToDoリストに追加され、順番に処理されます。 Spriteがスクリプトタグに遭遇するか、JavaScript関数を実行する必要があるときに、他のすべてが停止します。コード（必要に応じて）がダウンロードされ、さらにイベントまたはレンダリングが処理される直前に実行されます。これは、スクリプトが何でもできるため、これが必要です。より多くのコードを読み込み、各DOM要素を削除し、別のURLにリダイレクトするなどです。 2つ以上のスプライトがあっても、最初のスプライトがコードを処理するときに他のスプライトが機能するのを停止する必要があります。これはブロックです。これが、長期にわたるスクリプトがブラウザを反応させない理由です。通常、コードがウィジェットとイベントハンドラーを初期化するため、JavaScriptをできるだけ早く実行する必要があります。ただし、以下など、ユーザーエクスペリエンスに直接影響しないバックエンドタスクがいくつかあります。

• 分析データを記録します
• ソーシャルネットワークにデータを送信します（または57の「共有」ボタンを追加します）
• プレッチコンテンツ
• プリプロセシングまたはプレレンダリングhtml

これらは時間的に批判的なタスクではありませんが、ページに応答性を維持するために、ユーザーがコンテンツをスクロールしたり対話したりしても実行しないでください。 1つのオプションは、別のスレッドで同時にコードを実行できるWebワーカーを使用することです。これは、プリフェッチと処理に最適ですが、DOMへの直接アクセスや更新を許可しません。独自のスクリプトでこれを回避できますが、Google Analyticsなどのサードパーティのスクリプトが必要ないことを保証することはできません。別の可能性は、setTimeoutなどです。ブラウザは、他のすぐに実行されたタスクが完了した後にsetTimeout(doSomething, 1);関数を実行します。実際、To Doリストの下部に配置されています。残念ながら、この機能は処理要件に関係なく呼び出されます。 doSomething()

requestIdleCallback

は、ブラウザの呼吸の瞬間に必須でないバックエンドタスクをスケジュールするように設計された新しいAPIです。次の塗り直しの前にアニメーションを更新するために関数を呼び出すrequestIdleCallbackを思い出させます。詳細については、requestAnimationFrameこちらをご覧ください。 requestAnimationFrameこのようにサポートするかどうかを確認できます：

タイムアウト（ミリ秒単位）を使用してオプションオブジェクトパラメーターを指定することもできます。 requestIdleCallback これにより、ブラウザがアイドル状態であるかどうかに関係なく、機能が最初の3秒以内に呼び出されることが保証されます。

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 执行其他操作
  setTimeout(backgroundTask1, 1);
  setTimeout(backgroundTask2, 1);
  setTimeout(backgroundTask3, 1);
}

requestIdleCallback(backgroundTask, { timeout: 3000 });

requestIdleCallback - 実行可能タスクの残りのミリ秒を返す関数

• didTimeoutタスクには、50ミリ秒以下の実行時間が割り当てられます。この制限を超えるタスクを停止することはありませんが、さらに処理をスケジュールするために
を再度呼び出す方が良いです。複数のタスクを順番に実行する簡単な例を作成しましょう。タスクは、関数の参照として配列に保存されます：
• timeRemaining()
で実行すべきではないアクション

timeRemaining()ポール・ルイスがこのトピックに関する彼のブログ投稿で指摘しているように、あなたが実行する作品は片側に分割されるべきです。予測不可能な実行時間（DOMを操作するなど、requestIdleCallbackコールバックを使用して行うのが最適です）の場合は何のためにも機能しません。また、時間が残っていなくても、アイドルコールバックが完了した直後にコールバックが実行されるため、約束を解決（または拒否）するように注意する必要があります。

requestIdleCallbackブラウザサポート

requestIdleCallbackは実験機能であり、仕様はまだ変化しているため、APIの変更に遭遇したときは驚かないでください。 Chrome 47でサポートされています…これは2015年末までに利用できるはずです。また、オペラはこの機能をすぐに入手する必要があります。 MicrosoftとMozillaはどちらもAPIの使用を検討しており、有望に聞こえます。 Appleにはいつものようにニュースはありません。今日試してみたい場合は、Chrome Canary（前者ほど良くないが最新のクールな機能があるChromeの更新バージョン）を使用する最良の方法です。 Paul Lewis（上記）は、シンプルなrequestIdleCallbackシムを作成します。これはAPIの説明を実装しますが、ブラウザのアイドル検出動作をシミュレートできるポリフィルではありません。上記の例のようにsetTimeoutを使用する方法を使用しますが、オブジェクトの検出とコードフォーキングなしでAPIを使用する場合は良いオプションです。今日は限られたサポートがありますが、requestIdleCallbackは、Webパフォーマンスを最大化するのに役立つ興味深いツールかもしれません。しかし、あなたはどう思いますか？以下のコメントセクションであなたの考えを聞きたいです。

のスケジューリングバックエンドタスクの

JavaScriptのバックグラウンドタスクAPIは何ですか？

またはsetTimeoutメソッドよりも、バックエンドタスクを処理するためのより効率的でパフォーマンス指向の方法を提供します。 setInterval

およびsetTimeoutとどのように異なりますか？ setInterval

およびsetTimeout関数は、特定の遅延または定期的な間隔で実行するタスクをスケジュールするために使用されるJavaScriptの従来の方法です。ただし、これらのアプローチには、特にパフォーマンスの点でいくつかの制限があります。彼らはメインスレッドで実行されます。つまり、完了するのに時間がかかりすぎると、他のタスクをブロックし、ユーザーエクスペリエンスが悪い可能性があります。一方、バックグラウンドタスクAPIは、メインスレッドとは別にバックグラウンドでタスクを実行します。これは、メインスレッドのパフォーマンスに影響を与えることなく、より集中的なタスクを処理できることを意味します。 setInterval

バックグラウンドタスクAPIを使用して、バックグラウンドで実行されているタスクをスケジュールする方法は？

バックグラウンドタスクAPIを使用してタスクをスケジュールするには、requestIdleCallbackメソッドを使用できます。このメソッドは、コールバック関数を最初のパラメーターとして取得します。これは、ブラウザーがアイドル状態のときに実行されます。基本的な例は次のとおりです

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 执行其他操作
  setTimeout(backgroundTask1, 1);
  setTimeout(backgroundTask2, 1);
  setTimeout(backgroundTask3, 1);
}

requestIdleCallback(backgroundTask, { timeout: 3000 });

// 要运行的函数数组
var task = [
  background1,
  background2,
  background3
];

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 尽快运行所有任务
  while (task.length) {
    setTimeout(task.shift(), 1);
  }
}

// requestIdleCallback 回调函数
function backgroundTask(deadline) {
  // 如果可能，运行下一个任务
  while (deadline.timeRemaining() > 0 && task.length > 0) {
    task.shift()();
  }

  // 如果需要，安排进一步的任务
  if (task.length > 0) {
    requestIdleCallback(backgroundTask);
  }
}

window.requestIdleCallback(() => {
  // 您的后台任务在此处
});