优化图形和动画 intese 布局

Question

我正在开发一个使用大量大图像和大量 javascript 的网站。

在这里查看 - http://joehamilton.info/1/1/

我一直在努力提高性能，但收效甚微。我只想保持帧速率平稳，因为有时它会陷入困境。

我认为可能是代码让它陷入了困境，但在发现 chrome 中的分析后，似乎“绘制”过程正在减慢速度。

我只是想知道我可以做些什么来改进。我愿意接受任何建议，但我想我是在考虑这些事情类型的事情： • 压缩图像文件有帮助吗？ • 300px 方形重复图案图像在 900px 方形 div 中绘制是否比 900px 方形图像更快？

这是一个庞大而复杂的网站，所以如果它没有帮助，我宁愿不花很多时间修改东西。

那里有任何专业的光栅图像人吗？

Answer 1

对于任何移动的东西，你应该使用转换和变换而不是 jquery animate 和 background-position，因为它会在某些浏览器中被硬件加速。它还避免了如此频繁地重新粉刷。 http://css3.bradshawenterprises.com/demos/speed.php 是一个在公认的极端情况下比较这两种技术的示例。

如果您不能这样做，请确保您的动画使用 requestAnimationFrame 而不是 setTimeout 循环。

这应该很有帮助。