使用Raphael调用requestAnimationFrame会影响性能吗？

Question

使用Raphael调用requestAnimationFrame会影响性能吗？

5

我正在开发一个非常资源密集型的 Web 应用程序，其中大约有 50% 的动画使用了 Raphael.js。其余部分我自己编写了动画方法，该方法与 Web Audio API 的 context.currentTime 结合使用 webkitRequestAnimationFrame 同步动画和音频组件。

目前我遇到了相当糟糕的性能问题，查看了 Raphael 的源代码后发现它也使用了 requestAnimationFrame。我似乎经常在同时运行我的动画和 Raphael 的动画时出现卡顿。这是因为每个绘制周期实际上会调用两次 requestAnimationFrame 吗？

基本上，我想问的是，我是否必须重新编写一个针对 Raphael 对象的动画实现，并将其与现有的 requestAnimationFrame 集成在一起？

- tencircles

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Owen Masback · Answer 1

我遇到了一个类似的问题，关于SVG动画速度慢的问题。我对RAF的理解是，它会将更新从任何来源批量处理在一起，所以我不认为这是你的问题。

我发现大部分的循环时间都花在了重绘上。在JS方面，你无法做太多事情来加快重绘速度。但我认为你可以通过减少透明效果、滤镜和屏幕上较大区域的变化来减轻浏览器的负担。此外，重绘的速度与你更新的像素数量有关。我正在制作一个全屏网站，当我将视口大小加倍时，我的绘制时间也会加倍。

- Neil · Answer 2

据我所知，RAF 的整个目的是同步所有内容，以便为下一个渲染更新做好准备。我会像你一样做，因为这就是它的全部意义。

根据规范：

预期用户代理将以匹配显示器刷新率的正常间隔运行来自动画任务源的任务。以较低的速率运行任务可能导致动画不流畅。以较高的速率运行任务可能会导致额外的计算，而没有用户可见的好处。

所以我认为不应该有性能问题。