CSS3 - 性能最佳实践是什么？

Question

去年我花了很长时间阅读javascript性能，瓶颈和最佳实践。在我的最新项目中，我正在使用CSS3和javascript / jquery的后备，用于基本的动画和诸如悬停的效果，并且我对进一步尝试CSS3感兴趣。

CSS3性能是否存在问题？

如果是，那么最佳做法是什么？

例如，transition: all 150ms ease-out;使用的内存多于transition: opacity 150ms ease-out, background-color 150ms ease-out;？

[请不要只回答我的示例问题！]

Answer 1

是的，是的！如果你喜欢修改性能 - 你会很高兴知道CSS3有很多性能问题。

1. 重绘和重排。很容易造成不必要的重绘和重排，从而使整页滞后。阅读：http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/极端示例：http://files.myopera.com/c69/blog/lag-me.html
2. 滚动并悬停。滚动或悬停时，浏览器必须呈现新内容。 Webkit在这里很聪明，因为它将页面缓存为静态图像，因此在滚动时它不会呈现页面。但是 - 你可以绕过这个优化，通过在滚动的块中使用透明背景，在悬停时添加旋转，添加position:fixed粘贴页眉/页脚等等 - 效果会在不同的浏览器中保持警惕，Opera似乎目前受影响最大。
3. 盒子阴影是邪恶的。盒子阴影在不同浏览器中具有不同的渲染质量（Webkit低，Opera / IE9高，Firefox版本不同） - 因此它们的性能影响是不同浏览器之间存在差异 - 但是，inset框阴影和具有较大展开半径的框阴影可能会导致在任何浏览器中重绘时出现可观察的挂起。
4. 漂浮物，桌子和他们的朋友都是邪恶的。起初听起来很疯狂，但是阅读这篇文章（俄语） - http://chikuyonok.ru/2010/11/optimization-story/ - 它可能会让你头上留下一些头发。主要思想是 - 浮动元素的子元素会在修改过程中引起链条回流。
5. 边框半径非常昂贵，甚至比渐变更昂贵。不影响布局，但会影响重绘。 http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
6. 渐变滞后。 CSS渐变是非常酷的新工具，我是他们的忠实粉丝。然而，只有几个测试表明你不应该使用它们，如果你计划有很多带渐变的元素并且需要响应的界面:(有一个解决方法/黑客，但是， - 使用画布渲染渐变图像和设置它们作为背景通过数据网址。
7. 透明度很昂贵。如果你有许多相互交叉并且是半透明的移动元素（不透明度＆lt; 0，rgba颜色，png，圆角（！< / strong>）） - 期待滞后。通常可以通过限制可以叠加的透明元素的数量来解决。
8. 转换优于JS，但 ...如果您同时将这些转换应用于150多个元素，则Firefox无法正确呈现转场。 Opera无法在之前和之后应用过渡。 IE9根本不支持它们。在使用它们之前进行测试，但总的来说 - 它们比JS类似物（jQuery.animate）更快。
9. 注意CPU负载。很难通过浏览器来衡量内存使用情况，（但你可以用chrome和插值结果来做一些盐）但是很容易观察cpu -usage（通过Process Explorer或系统工具）。 Spikes会告诉你需要注意的地方。
10. 旧浏览器已经过时了。不要尝试对IE6，Firefox 2，Safari 3进行现代化改造。这些浏览器从不应该处理很酷的新东西。别管它们了。只需提供基本风格的基本内容。剩下的IE6用户将会感激不尽。

Answer 2

要测试它，你必须让动画发生500或1000次并计时。

Canvas和HTML5动画的方式比闪存更多CPU。 iPhone上的Flash优于HTML5替代品。我会使用JQuery做我的动画，音频和视频，因为HTML5交换灵活性方便。