改善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动画功能，创建CSS类以创建本机CSS动画，并在滚动AND（非常重要）时添加类，使用requestAnimationFrame优化滚动事件，并尽可能减少计算。

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

（编辑）添加更多信息：我使用chrome开发工具深入了解了您的代码中的一些细节，并且在功能步骤上看到文件SmoothScroll.js的严重瓶颈称为：ssc_wheel => ssc_scroll =>功能步骤（33秒，63秒...）。 此功能“步骤”一次又一次地花费大量执行时间，因此cpu将被杀死。 为了增强性能，我建议首先使用requestAnimationFrame对其进行调用，然后我们可以再次查看是否有一些积极的效果（如果做得好，您会看到更好的增强）。 阅读文章以增强requestAnimationFrame的滚动：）

在编辑代码时，请记住这一点：“在诸如滚动之类的事件上，放置一个指示事件滚动的布尔变量，如果该变量的值为false，则将该变量设置为true，然后使用以下命令调用函数以检查或更新动画像'requestAnimationFrame（animateMyPage）'这样的requestAnimationFrame在函数'animateMyPage'中检查滚动位置并将类添加到动画对象中，但是要小心，如果要在框架中做很多工作，请尽量减少操作也将需要等待下一帧！在'animateMyPage'的末尾也设置为false，用于滚动事件，以避免不必要地调用requestAnimationFrame（'animateMyPage'）。

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