javascript - 提高 CSS3 动画的性能

Question

我的网站在 FireFox 上运行得很好，但在 Chrome 上却很乱。 这是一个完整的动画网站，有很多 CSS3 滚动动画，这些动画是用 jQuery 航路点触发的，还有我写的一个脚本，用滚动添加和删除类。

有没有办法让它在 Chrome 浏览器上表现得更好？

这是网站: http://www.aikoncreative.com/

Answer 1

这很复杂。您使用的是 jQuery 动画，但存在一些问题:

1. jQuery.animate 与 css 动画相比性能较差，因为不使用 gpu，仅使用 cpu，所以移动不如 css 过渡平滑。
2. jQuery.animate 不使用 requestAnimationFrame 来执行动画。它使用 setTimeout 或 setInterval，因此性能最差。

我的建议是尽量避免使用 jQuery animate 函数，创建 css 类以创建原生 css 动画并在滚动时添加类并且(非常重要)，使用 requestAnimationFrame 优化滚动事件并尽可能减少计算。

请阅读 Paul Lewis 的这篇文章，非常棒:http://www.html5rocks.com/en/tutorials/speed/animations/

(编辑)添加更多信息: 我使用 chrome 开发工具深入研究了你的代码几分钟，我在文件 SmoothScroll.js 上看到了一个可怕的瓶颈，函数步骤称为:ssc_wheel => ssc_scroll => 函数步骤(33 秒，63 秒......)。这个函数“step”一次又一次地花费大量的执行时间，所以 cpu 会被杀死。为了增强性能，我建议首先使用 requestAnimationFrame 调用它，然后我们可以再次查看是否有一些积极的效果(如果你做得好，你会看到更好的增强)。阅读文章以使用 requestAnimationFrame 增强滚动 :)

在编辑代码时请牢记这一点:“在像滚动这样的事件中，放置一个 bool 变量来指示有一个事件滚动，如果它的值为 false，则此变量设置为 true，然后调用您的函数来检查或使用像'requestAnimationFrame(animateMyPage)'这样的requestAnimationFrame更新动画。在你的函数'animateMyPage'中检查滚动位置并向你的动画对象添加类，但是要小心，尽可能少地操作，如果你有很多工作要做一个帧你将需要等待下一帧!在 'animateMyPage' 的末尾设置为滚动事件中使用的 false 变量，以避免不必要地调用 requestAnimationFrame('animateMyPage')。

这些是一些步骤，但还有更多步骤，但是，请先尝试进行此增强。