1

I have a very long page with multiple canvases. They don't overlap each other, and are mostly used separately for PIXI.js to play spritesheets.

I use requestAnimationFrame to render each canvas.

I have a few questions since I'm unsure how to optimize.

1) When a canvas is offscreen, do I need to cancelAnimationFrame? Or does it not matter because it is offscreen and therefore won't be painted?

2) Should I have all my render functions within the same requestAnimationFrame? Will that improve performance?

Any other suggestions?

Terence Chow
  • 9,287
  • 19
  • 60
  • 120
  • In my mind, requestAnimationFrame() will fire even when not visible in the screen, it won't only if you minimize the window or if you navigate to an other tab. So you may win some ms by canceling when not visible but I'm really not sure that you'll win anything by making only one call. To test preformances, you can make use of [`performance.now()`](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now) – Kaiido Jun 23 '15 at 03:56
  • @Kaiido thanks for that. What do i use performance.now() for? Put it in the request animation frame to see how many fps im getting? – Terence Chow Jun 23 '15 at 13:40
  • Well mdn's example seems quite forward: you store a first performance.now() at the start of your routine, and substract it to a new call to performance.now() at the end; you've got the time it took to execute the code in ms. Like so you can compare different implementations. – Kaiido Jun 24 '15 at 00:47
  • I think it should help to make all the render calls in one raf. That way it should also be easier to skip rendering inactive canvases. You can verify by getting some good data on performance using the browser dev tools and comparing the two versions – imcg Jun 29 '15 at 13:11

1 Answers1

4

Comments provide most of the information, let me still answer all the points:

  • requestAnimationFrame is naturally a window, not canvas method. Thus it is not aware of canvas visibility. There is "element" parameter in WebKit, but it is not in current spec http://www.w3.org/TR/animation-timing/#requestAnimationFrame. Thus there are no benefits in having multiple handlers, it will improve performance if you have just one requestAnimationFrame taking care of the entire flow.
  • Browsers (tested on Safari/FF/Chrome) will not call requestAnimationFrame if tab is not visible at all. There's no much benefit in cancelling animation frame request manually.
  • PIXI is not checking for canvas visibility in renderer.render(stage). You can use getBoundingClientRect to check canvas visibility before rendering. This may increase performance quite a bit. How to tell if a DOM element is visible in the current viewport?

Best way to profile this particular scenario is probably through Chrome timeline view https://developer.chrome.com/devtools/docs/timeline . Animation skipping may reduce browser composite/paint times. Only checking javascript execution time might be a little misleading, especially if we remember that WebGL calls may execute asynchronously.

Community
  • 1
  • 1
sbat
  • 1,225
  • 7
  • 21