ウェブアプリのウェブワーカーに関するベストプラクティス

​

Vega WebViewでのウェブワーカー

1. メインスレッドが新しいワーカーを作成します。
2. ワーカーがメッセージをポストします。
3. ワーカーがメッセージを処理します。
4. システムがメインスレッドに新しいメッセージを送信します。
5. 返されたメッセージをメインスレッドが処理します。メインスレッドとの通信は、メインスレッドのパフォーマンスに影響を及ぼします。多数の小規模なワーカーがほぼ同時に処理を終えてメインスレッドにデータを返すと、メインスレッドに影響が生じます。この影響は、レスポンスが同時実行で処理される場合でも発生します。

​

Vega向けのウェブワーカーのガイドライン

• ウェブワーカーは本当に有益なタスクに使用し、それらがどのイベントによってトリガーされるかを把握して注意を払います。ウェブワーカーの数が多すぎると、Fire TV Stick 4K Selectなどのリソースの少ないデバイスは過負荷になる可能性があります。
• ワーカーとメインスレッド間で受け渡されるデータの量を削減します。
  • 大量のデータのコピーが行われるのを避けるために、移譲可能オブジェクトを使用します。
    // 大量のデータのコピーが行われるのを避けるために、移譲可能オブジェクトを使用します
    const data = new Uint8Array(1024 * 1024); // 1MBのデータ
    worker.postMessage(data, [data.buffer]); // 基になる配列バッファを転送する
    
• ワーカーを管理し、いつ不要になるかを把握します。terminateを使用して不要なワーカーを削除し、すべてのワーカーが同時に終了してメインスレッドがあふれないようにします。
  // 不要になったワーカーを終了します。
  worker.terminate();
  
• 新しいワーカーを生成する代わりに、可能な場合はワーカーまたはワーカープールを再利用します。
  const worker = new Worker('worker.js');
  worker.postMessage('メインスレッドからの指示');
    
  // ... その後 ...
    
  // 新しいタスクをポストしてワーカーを再利用します。
  worker.postMessage('新しいタスク');
  
• キャッシュを使用して再計算を減らします。
  // 効率的なIDベースの検索にはMapを使用する
  const cache = new Map<string, CachedData>(); 
    
  self.onmessage = async (event: MessageEvent) => {
    const { type, payload } = event.data;
    const { id, forceRefresh } = payload;
    
    // データが既にキャッシュにあるかどうかを確認します
    if (cache.has(id) && !forceRefresh) {
      self.postMessage({ type: 'DATA_RESPONSE', payload: cache.get(id).data });
      return;
    }
    // ...
  
• 特定のコア数で適切に実行できるウェブワーカーの数を把握します。クアッドコアCPUを実行する場合のガイドラインは次のとおりです。
  • クアッドコアは1～9個のシンプルなワーカーを適切に実行できます
  • クアッドコアは9～15個のワーカーを実行できますが、UIには多少影響があります
  • クアッドコアは15～30個のワーカーを実行できますが、明らかな影響があります
  • クアッドコアで30個以上のワーカーを実行するのは難しいです
  • 使用するワーカーの数を算出するためのアルゴリズムは次のとおりです。
    • 常に安全：number_of_workers = navigator.hardwareConcurrency - 2
    • ほとんど安全：number_of_workers = (2 * navigator.hardwareConcurrency) + 1
  • 長期間存続するワーカーや負荷の高いワーカーは、同時に実行する数を2～4個にすることを検討します。
  • CPU負荷の高いタスクがある場合は、問題を引き起こす可能性のあるワーカーが同時に多数実行されないようにしてください。処理を手動で管理して、システムの過負荷を防ぐことができます。
• 同じファイルが再ダウンロードされないようにヘッダーを設定します。ライブラリの中には、ワーカーを使用して画像やその他のコンテンツをキャッシュするものもありますが、多くのライブラリでは、事前に定義された戦略パラダイムが使用されます。
  • TVアプリでは、ナビゲーション時に画像が存在しない場合にワーカーがトリガーされることがよくあります。これは、情報を事前に読み込んで滑らかな動作を実現するためです。これらの画像がキャッシュされないと、すばやいナビゲーションが行われたときにシステムでワーカーが大量に作成され、動作のつっかかりやフリーズが発生しやすくなります。画像を適切にキャッシュに保存するようにヘッダーを適切に設定してください。
  • キャッシュ戦略にはいくつかの種類があります。これらのライブラリの多くは、「キャッシュのみ」、「キャッシュファースト」、「ネットワークのみ」、「ネットワークファースト」、「stale-while-revalidate」のいずれかを使用しています。ライブラリによっては、有効期限を使用するなど、ほかのオプションを使用する場合があります。

​

関連トピック

• Vegaウェブアプリの概要
• ウェブアプリのパフォーマンスに関するベストプラクティス
• ウェブアプリ開発に関するベストプラクティス
• ウェブアプリのWebGLに関するベストプラクティス