页面上有多个画布。优化问题

Question

我有一个很长的页面，有多个画布。它们彼此不重叠，并且大多数单独用于PIXI.js来播放spritesheets。

我使用requestAnimationFrame渲染每个画布。

我有几个问题，因为我不确定如何优化。

1）当画布在屏幕外时，我是否需要cancelAnimationFrame？或者它无关紧要，因为它在屏幕外，因此不会被绘制？

2）我应该在同一个requestAnimationFrame中拥有所有render个函数吗？这会改善表现吗？

还有其他建议吗？

Answer 1

评论提供了大部分信息，让我仍然回答所有问题：

• requestAnimationFrame自然是一个窗口，而不是canvas方法。因此，它不知道画布可见性。有＆＃34;元素＆＃34; WebKit中的参数，但它不在当前规范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调用可以异步执行。