我的页面很长，上面有多个画布。它们彼此不重叠，并且通常单独用于PIXI.js播放子画面。
我使用requestAnimationFrame渲染每个画布。
由于不确定如何优化，我有几个问题。
1）当画布不在屏幕上时，是否需要cancelAnimationFrame？还是没关系，因为它不在屏幕上，因此不会被绘制？
2）我是否应该在同一个requestAnimationFrame中拥有所有render函数？这样会改善性能吗？
还有其他建议吗？
最佳答案
评论提供了大多数信息，让我仍然回答所有要点：requestAnimationFrame自然是一个窗口，而不是canvas方法。因此，它不知道画布的可见性。 WebKit中有“ element”参数，但当前规范http://www.w3.org/TR/animation-timing/#requestAnimationFrame中没有。因此，拥有多个处理程序没有任何好处，如果只有一个requestAnimationFrame负责整个流程，它将提高性能。
如果选项卡根本不可见，浏览器（在Safari / FF / Chrome上测试）将不会调用requestAnimationFrame。手动取消动画帧请求没有太大好处。
PIXI不在renderer.render(stage)中检查画布的可见性。您可以使用getBoundingClientRect在渲染之前检查画布的可见性。这可能会大大提高性能。 How to tell if a DOM element is visible in the current viewport?
对此特定情况进行分析的最佳方法可能是通过Chrome时间轴视图https://developer.chrome.com/devtools/docs/timeline。动画跳过可以减少浏览器的合成/绘制时间。仅检查javascript执行时间可能会有点误导，特别是如果我们记得WebGL调用可能异步执行的话。
关于javascript - 一个页面上有多个 Canvas 。优化问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30993174/