CODEWITHSUNDEEP
javascriptcanvaspixi.js
Terence Chow
Terence Chow

Reputation: 11153

Multiple canvases on a page. Optimization questions

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?

Upvotes: 1

Views: 1031

Answers (1)

sbat
sbat

Reputation: 1888

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.

Upvotes: 4

Related Questions