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. 透明度很高.如果你有许多相互交叉并且是半透明的移动元素(不透明度<0,rgba颜色,png,圆角(!)) - 期望滞后.通常可以通过限制可以叠加的透明元素的数量来解决.
8. 转换比JS更好,但是 ......如果同时将它们应用于150多个元素,Firefox无法正确渲染转换.Opera无法在之前和之后应用过渡.IE9根本不支持它们.在使用它们之前进行测试,但总的来说 - 它们比JS类似物(jQuery.animate)更快.
9. 注意CPU负载.很难通过浏览器测量内存使用量(但你可以用chrome和插值结果,但有一些盐),但很容易观察cpu使用(通过Process Explorer或系统工具).尖峰将显示您需要注意的地方.
10. 旧浏览器很旧.不要试图使IE6,Firefox 2,Safari 3现代化.那些浏览器从来不应该处理很酷的新东西.别管它们了.只需提供基本风格的基本内容.剩下的IE6用户将会感激不尽.

Answer 2

为了测试这一点，您必须让动画发生 500 或 1000 次并计时。

Canvas 和 HTML5 动画比 Flash 占用更多的 CPU 资源。iPhone 上的 Flash 性能优于 HTML5 替代品。为了方便起见，我会使用 JQuery 来制作动画、音频和视频，因为 HTML5 交换了灵活性。