WebKit Screensaver: setTimeout vs. requestAnimationFrame()

Question

I'm developing a custom screensaver based on HTML5/JS for cinnamon :-D.

It moves some things around. Very similar to the default windows-flag screensaver from WinXP times. (For anyone who doesn't remember it: A tiny static picture is moved to another position every few seconds).

Which approach for the loop consumes less resources and less battery power?

requestAnimationFrame: These loops usually freeze automatically after a few seconds if the page gets invisible. This would be fine if the screen enters energy save mode. But it is running at 60hz. An additional timer is added so only every nth. call the code is executed (if n seconds elapsed since last action, then do again...).

var loop = function(){
  requestAnimationframe(loop);
  if (time - lasttime > 5000) {
     lasttime = time;
     blabla();
  }
};
loop();

setTimeout: These loops stay running even if the page gets invisible. It would stop only if the screensaver gets cancelled.

var loop = function(){
  setTimeout(loop, 5000);
  blabla();
};
loop();

The blabla() does control the animation by changing the DOM.

Examples are simplified pseudocodes.

Which one should I pick in this case?

It is NOT for browsers but for cinnamon webkit screensaver use.

WebKit Screensaver: setTimeout vs. requestAnimationFrame()

0 Answers0