javascript - Delayed repetition of an event using Web Worker -


i have few cpu intensive tasks performed on web page involve calculations , drawing of texts. these tasks supposed repeated @ interval (10-20 ms).

i decided use web worker job, considering our target browsers latest versions of major browsers supports html5 & web worker.

the content of draw_worker.js in standard format:

var = 0;  function timedcount() {     = + 1;     postmessage(i);     settimeout("timedcount()", 15); }  timedcount(); 

the content of function used worker is:

function startworker() {     if(typeof(worker) !== "undefined") {         if(typeof(w) == "undefined") {             w = new worker("draw_worker.js");         }         w.onmessage = function(event) {             //function calculate & draw             calculatedrawdata();         };     }  } 

things work fine on major browsers on pc , tablets without issues. calculatedrawdata() function called @ around 15-20 ms interval expect. on few tablets , phones things not smooth. investigated , found calculatedrawdata() not called @ interval of around 15 ms , takes 70 ms or more before called.

i doubted execution of calculatedrawdata() function might taking long time. after investigation found calculatedrawdata() takes 6-12 ms.

i'm wondering might causing delay in interval @ onmessage being called. how investigate further? there tool can help?

any appreciated.

i kept on working on problem had no other choice after receiving no response @ so. developer tools available in chrome helped me in digging out root-cause. "performance" profiling right tool in such cases. selected perfromance tab in devtools. steps taken afterwards analyse problem are:

  1. select cpu throttling "5 x slowdown".
  2. record 20 seconds.
  3. review analysis results.
  4. the prime area of attention wider columns in main section exhibits functions take longer time execute.
  5. selected 1 of wider column. summary tab showed details of time distribution. selected bottoms-up table analysis of time taken every function , sub-functions.

the top level function being called setinterval call.

the function pointed out bottom-up section taking 70% of total execution time.

the task rather simple afterwards. function in question had optimized.

the main point want raise here since un-optimized function called setinterval able interfere web worker , able delay it.


Comments

Popular posts from this blog

javascript - Create a stacked percentage column -

Optimising Firebase database by automatically overwriting data -

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -