How to reduce CPU usage of web worker HTML 5

Question

I am using web worker (WW) for an animation. I use WW instead of using setInterval to avoid problem setInterval is stopped when tab is in active. But the WW seems to use so much CPU, it always take at least 37 - 38% of CPU. Can you please advise any solution how to reduce this usage? Live demo: https://repl.it/repls/SweetPowerlessKeychanger#worker.js
Below is my code. Thank you so much.

Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Worker 1</title>
    <style>
        #it {
            width: 50px;
            height: 50px;
            background: red;
            border-radius: 50%;
            position: fixed;
            top: 50px;
        }
    </style>
</head>
<body>
    <div id="it"></div>
    <script src="main.js"></script>
</body>
</html>

Main.js (Mother of the worker):

const it = document.getElementById("it");
it.style.left = "10px";
const maxLeft = window.innerWidth - 50;

const worker = new Worker("./worker.js");
worker.postMessage({
    currentX: 10,
    limit: maxLeft
});
worker.onmessage = (ev) => {
    const data = ev.data;
    it.style.left = data + "px";
    worker.postMessage({
        currentX: parseFloat(it.style.left),
        limit: maxLeft
    })
};

worker.js:

let speed = 0.05;

onmessage = (ev) => {
    const {currentX, limit} = ev.data;
    if (currentX >= limit) {
        speed = -0.05
    }
    if (currentX <= 0) {
        speed = 0.05
    }
    postMessage(currentX + speed)
}

well, you are posting as "fast as possible" - so the cpu usage will be high - recommend you use requestAnimationFrame to limit the message frequency (you'll need to adjust the speed though) — Jaromanda X, Commented Oct 5, 2020 at 3:59
I used to use RFA too, it has the some problem with setInterval, the animation stopped when tab in active. That's why I am using web worker. Any idea? — vanminhquangtri, Commented Oct 5, 2020 at 4:09

Kaiido · Accepted Answer · 2020-10-05 05:58:48Z

It uses a lot of CPU because as has been pointed out in comments, you are asking the Worker to perform a new job right after you received the previous response.

In best case scenario, main is idle, it is able to handle the worker's message directly and posts a new message -> there is not even a single iteration of the worker's event-loop where it has nothing to do.

Depending on your configuration, this also means that you are asking main to update your element's position about a thousands times per screen-refresh rate, really not a great idea.

To workaround that, you should be using some kind of timer in the worker thread.
Recent browsers have added requestAnimationFrame method in this context too, and if it's not available, you can always fallback to using setTimeout.

But note that your whole idea of using a Web-Worker as a mean to work-around the browser's throttling of timers in background's tabs is prone to fail too very soon.
Indeed, browsers have scheduled to also throttle Web-Workers in a near future, and then it will stop working.

Instead you should rather refactor your code so that it uses the elapsed time to define your element's position (a.k.a. time-delta). This way, it doesn't matter if the page is throttled or not, your element is at the position it should have been at this time.

const it = document.getElementById("it");
const checkbox = document.querySelector("input");
const maxLeft = window.innerWidth - 50;
const duration = 2000; // time to traverse the screen (ms)
const start = performance.now();

function anim( now ) {
  const delta = ((now - start) % duration) / duration;
  // determine if we should go to left or to right
  const direction = Math.sign( ((now - start) % (duration * 2)) - duration );

  let position;
  if( direction < 0 ) {
    position = delta * maxLeft;
  }
  else {
    position = maxLeft - (delta * maxLeft);
  }
  it.style.left = position + "px";
  if( checkbox.checked ) {
    requestAnimationFrame( anim );  
  }
}

requestAnimationFrame( anim );
checkbox.oninput = anim;

#it {
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 50%;
    position: fixed;
    top: 50px;
}

<div id="it"></div>
<label>pause/resume<input type="checkbox" checked></label>

Recent browsers have added requestAnimationFrame method in this context too - which ones? I haven't found that documented anywhere — Jaromanda X, Commented Oct 5, 2020 at 6:00
Blink ones, it's needed for OffscreenCanvas developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas has a note, specs are up to date: html.spec.whatwg.org/multipage/… ("DedicatedWorkerGlobalScope includes AnimationFrameProvider;"), maybe MDN article should get updated to use WindowOrWorkerGlobalScope but I guess it might break links... — Kaiido, Commented Oct 5, 2020 at 6:00

Collectives™ on Stack Overflow

How to reduce CPU usage of web worker HTML 5

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related