使用Web Worker延遲重複事件

-2

我的網頁上執行的CPU密集型任務很少，涉及一些計算和繪圖文本。這些任務應該在一個時間間隔（10-20毫秒）內重複。使用Web Worker延遲重複事件

考慮到我們的目標瀏覽器是支持HTML5 & Web Worker的主流瀏覽器的最新版本，我決定使用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和平板電腦的所有主流瀏覽器沒有正常工作任何問題。正如我所期望的那樣，在大約15-20毫秒的間隔內調用calculateDrawData()函數。但在少數平板電腦和手機上，事情並不順利。我調查了一下，發現calculateDrawData()沒有在大約15毫秒的時間間隔內被調用，並且在調用之前非常頻繁地需要70毫秒或更多時間。

我懷疑執行calculateDrawData()函數可能需要很長時間。但經過調查發現，calculateDrawData()只需要6-12毫秒。

我只是想知道什麼可能導致onmessage被調用的時間間隔延遲。如何進一步調查？

來源

2017-07-28 MKR

我一直在解決這個問題，因爲我在沒有收到任何迴應後沒有其他選擇。 Chrome中提供的Developer tools幫助我挖掘根本原因。「性能」分析是在這種情況下提供幫助的正確工具。我在DevTools中選擇了Perfromance選項卡。之後分析問題的步驟如下：

選擇CPU throttling爲「5 x slowdown」。
記錄約20秒。
評論分析結果。
關注的主要區域是Main部分中較寬的列，因爲這些展品功能需要較長時間才能執行。
選擇較寬的一列。 Summary選項卡顯示時間分佈的詳細信息。然後選擇Bottoms-Up表分析每個功能和子功能所用的時間。

從setInterval調用中調用頂級函數。

Bottom-Up節指出的功能約佔總執行時間的70％。

之後的任務相當簡單。有問題的功能必須進行優化。

我想在這裏提出的要點是，由於未優化的功能從setInterval被調用，它能夠干涉Web Worker，甚至能夠延遲它。

來源

2017-08-08 06:23:59 MKR

使用Web Worker延遲重複事件

回答

相關問題