Webワーカーを使用したイベントの繰返しを遅らせる

Question

ウェブページ上で実行されるCPU集約的なタスクはほとんどありませんが、計算やテキストの描画が含まれています。これらのタスクは、間隔（10〜20ms）で繰り返されることになっています。

私たちのターゲットブラウザがHTML5 & Webワーカーをサポートする最新の主要ブラウザであると考えて、この仕事にWeb Workerを使用することにしました。

draw_worker.jsの内容は、標準フォーマットのようなものです：

var i = 0; 

function timedCount() { 
    i = i + 1; 
    postMessage(i); 
    setTimeout("timedCount()", 15); 
} 

timedCount(); 

労働者が使用する機能の内容は次のとおりです。

function startWorker() { 
    if(typeof(Worker) !== "undefined") { 
     if(typeof(w) == "undefined") { 
      w = new Worker("draw_worker.js"); 
     } 
     w.onmessage = function(event) { 
      //Function to calculate & draw 
      calculateDrawData(); 
     }; 
    } 

} 

物事はPCとタブレット上のすべての主要なブラウザなしで正常に動作任意の問題。 calculateDrawData()関数は、私が期待しているように約15〜20ミリ秒の間隔で呼び出されます。しかし、いくつかのタブレットや携帯電話では、物事はスムーズではありません。調査したところ、calculateDrawData()は約15msの間隔で呼び出されず、非常に頻繁に呼び出される前に70ms以上かかることがわかりました。

calculateDrawData()の実行に時間がかかる可能性があります。しかし、調査の結果、calculateDrawData()は6〜12ミリ秒しかかかりませんでした。

私はちょうどonmessageが呼び出されている間隔の遅延を引き起こしているのだろうかと思っています。それをさらに調査する方法は？

Answer 1

私はこの問題を解決するために何もしていませんでした。 Chromeで利用可能なDeveloper toolsは根本原因を掘り起こすのに役立ちました。そのような場合には、「パフォーマンス」プロファイリングが役立ちました。 DevToolsでPerfromanceタブを選択しました。その後、問題を分析するために必要な手順は、

1. CPU throttlingから「5 x slowdown」を選択します。
2. 約20秒間記録します。
3. 分析結果を確認します。
4. 注意が最も重要なのは、機能が実行に時間がかかるように、Mainセクションの列の幅が広いことでした。
5. 広い列の中から1つを選択します。 Summaryタブに時間分布の詳細が示されました。次に、すべての関数とサブ関数がとった時間の分析のためにテーブルBottoms-Upを選択しました。

トップレベル関数がsetInterval呼び出しから呼び出されました。

Bottom-Upセクションで指摘されている機能は、合計実行時間の約70％を占めています。

その後の作業はかなり簡単でした。問題の機能を最適化する必要がありました。

私がここで提起したいのは、最適化されていない関数がsetIntervalから呼び出されたため、Web Workerと干渉し、それを遅延させることさえできたということです。