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秒以内に呼び出されることが保証されます。

関数を1回だけ呼び出し、次のプロパティで締め切りオブジェクトを渡します。

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

- オプションのタイムアウトトリガーがtrueに設定されている場合、trueに設定

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（FAQ）

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

FAQ

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

JavaScriptの背景タスクAPIは、メインスレッドがアイドル状態であっても、開発者がバックグラウンドで実行されるタスクをスケジュールできる強力なツールです。このAPIは、メインスレッドをブロックせずにこれらのタスクを実行し、ユーザーエクスペリエンスの不良につながる可能性があるため、多くの計算またはネットワークリクエストを必要とするタスクに特に適しています。バックエンドタスクAPIは、最新のブラウザが提供するより大きなWeb APIの一部であり、従来の

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

バックグラウンドタスクAPIは、

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

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

すべてのブラウザでバックグラウンドタスクAPIを使用できますか？

バックエンドタスクAPIは、最新のブラウザが提供するWeb APIに比較的新しい追加であるため、すべてのブラウザーでサポートされない場合があります。プロジェクトでAPIを使用することを計画している場合、使用する予定のAPIの現在のサポートレベルを常に確認することが最善です。使用できるWebサイトは、さまざまなブラウザーのさまざまなAPIのサポートレベルに関する最新情報を提供します。

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

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

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

スケジュールされたバックグラウンドタスクをキャンセルするにはどうすればよいですか？

メソッドを使用してスケジュールされたバックグラウンドタスクをキャンセルする必要がある場合は、

メソッドを使用できます。この方法では、IDをそのパラメーターとしてrequestIdleCallbackで返します。例は次のとおりです。cancelIdleCallback requestIdleCallback タイムアウトオプションの使用は

requestIdleCallback(backgroundTask, { timeout: 3000 });

ですか？

のタイムアウトオプションは、requestIdleCallback

の最大時間（ミリ秒単位で）を指定します。ブラウザは、アイドル状態でなくても、コールバックを実行する前に待機する必要があります。これは、バックグラウンドタスクが特定の時間枠内で実行する必要がある場合に役立ちます。

requestIdleCallbackバックグラウンドタスクのエラーを処理する方法は？

バックグラウンドタスクAPIを使用してスケジュールされたバックグラウンドタスクでのエラーの処理エラーは、他のJavaScriptコードのエラーの処理に似ています。 Try/Catchブロックを使用して、タスクの実行中に発生するエラーをキャッチできます。例は次のとおりです。

node.jsでバックグラウンドタスクAPIを使用できますか？

// 要运行的函数数组
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);
  }
}

バックエンドタスクAPIは、最新のブラウザが提供するWeb APIの一部であるため、node.jsではデフォルトでは使用できません。ただし、ワーカースレッドや子プロセスの使用など、node.jsでバックグラウンドタスクを実行する他の方法があります。

約束でバックグラウンドタスクAPIを使用できますか？

バックグラウンドタスクAPIは約束を返さないため、Async/awaitで直接使用することはできません。ただし、非同期のコンテキストで使用する必要がある場合は、

メソッドを約束に包むことができます。例は次のとおりです。

requestIdleCallbackバックエンドタスクAPIのいくつかのユースケースは何ですか？

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

バックグラウンドタスクAPIは、メインスレッドをブロックせずにこれらのタスクを実行できるため、多くの計算またはネットワークリクエストを必要とするタスクに役立ちます。ユースケースのいくつかの例には、APIからのデータの取得と処理、複雑な計算の実行、またはユーザーインタラクションに基づいてUIの更新が含まれます。

以上がJavaScriptでバックグラウンドタスクをスケジュールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。