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

去年我花了很长时间阅读JavaScript的性能，瓶颈和最佳实践。在我最近的项目中，我使用了CSS3，将回退到javascript/jquery用于基本动画和效果，例如悬停，并且有兴趣进一步尝试CSS3。CSS3 - 性能最佳实践是什么？

CSS3性能有问题吗？

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

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

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

来源

2011-09-20 Haroldo

有趣的问题。到目前为止您的测试结果如何？你有没有试过用500个div来制作一个页面，通过每种方法（也可能是值得尝试Javascript方法）？ –

这是一个有趣的问题，但CSS不可能成为任何现实生活中的性能瓶颈。 – JJJ

@Steven Xu - 哈哈，我以为我会先问这里。如果某人已经在某个地方已经制作了一个很棒的资源，那么重新发明轮子就没有意义了，我会尽最大努力检查一下，然后做我的实验来展开已经完成的工作...... – Haroldo

-6

要测试出来，你就必须让你的动画发生500或1000倍和时间了。

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

来源

2011-09-20 13:39:59 desbest

iPhone上的Flash ...？ – JJJ

同上 - 在iPhone上闪存？而且，jQuery与Flash完全无关。 – Spudley

不太确定flash是如何进入它的，我正在操纵dom元素。 CSS，JavaScript和jQuery使用'css'，flash在一个完全不同的画布上工作？ – Haroldo

是的！如果你喜欢修补性能 - 你会很高兴知道CSS3存在很多性能问题。

重绘和回流。它很容易造成不必要的重绘和回流，从而使整个页面滞后。阅读：http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/极端示例：http://files.myopera.com/c69/blog/lag-me.html
滚动和悬停。当您滚动或悬停时，浏览器必须呈现新内容。 Webkit在这里很聪明，因为它将页面缓存为静态图像，因此当您滚动时它不会呈现页面。但是 - 你可以绕过这个优化，通过在你正在滚动的块中使用诸如透明背景之类的东西，在悬停时添加旋转，添加position:fixed粘性页眉/页脚等等 - 效果会在不同的浏览器中保持警惕，Opera似乎最受当前影响。
箱子阴影是邪恶的。在不同的浏览器中，Box-shadows具有不同的渲染质量（Webkit中较低，Opera/IE9中较高，因Firefox版本而异） - 因此它们对不同浏览器的性能影响不同 - 然而，inset盒影和盒影如果传播半径较大，则可能导致在任何浏览器中重绘时出现可观察的挂起。
漂浮物，桌子和他们的朋友是邪恶的。起初听起来很疯狂，但阅读这篇文章（俄语） - http://chikuyonok.ru/2010/11/optimization-story/ - 它可能会为你节省一些头发。主要思想是 - 浮动元素的孩子会一直向上修改链。
边界半径非常昂贵，甚至比梯度更昂贵。不影响布局，但会影响重新绘制。 http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
渐变滞后。 CSS渐变是非常酷的新工具，我是他们的忠实粉丝。然而，只有几个测试表明，如果您计划使用渐变的元素并且需要响应式界面（不过有一些测试表明您不应该使用它们:(尽管如此，还是有一种解决方法/使用canvas - 使用画布渲染渐变图像并设置他们作为背景通过数据url
透明度很贵。如果您有多个移动元素互相交叉且半透明（不透明度< 0，rgba颜色，png，圆角（！）） - 预计滞后。通常可以通过限制可以叠加的透明元素的数量来制定。
转换比JS好，但是 ...如果您同时将它们应用到150多个元素，则Firefox无法正确呈现转换。 Opera无法将转场应用于之前和之后。 IE9根本不支持它们。在使用它们之前进行测试，但通常 - 它们比JS类似物更快（jQuery.animate）。
注意CPU负载。它很难测量跨浏览器的内存使用情况，（但你可以用铬和内插结果，用一些盐），但它很容易观察CPU使用情况（通过Process Explorer或系统工具）。尖刺会显示你的地方，你需要注意的地方。
旧的浏览器是旧的。不要尝试现代化IE6，Firefox 2，Safari 3.这些浏览器从来不应该处理很酷的新东西。让他们独处。只需提供基本样式的基本内容。剩下的IE6用户会为此感恩。

来源

2011-09-20 15:49:39 c69

感谢您的指点！我肯定会不同意那些因为“不具有建设性”而关闭这个问题的MODS。我会认为你的评论非常有建设性。 TBH似乎感到惋惜，人们正在关闭这样的问题。 – Haroldo

从我所知道的情况来看，box-shadow：插入半径> = 15px在Safari中确实很慢。对于其他情况：只是不要过度使用此功能。 – kirilloid

二维和三维转换也非常昂贵，动画也是如此。但是在大多数情况下，您会注意到没有任何外部提示或工具的性能影响;） – c69

-1

Paul Irish on CSS3 performance

来源

2011-09-20 16:38:29 Rob

好视频，但它不完全关于CSS。像WebWorkers或requestAnimationFrame是JS。 – c69

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

回答

相关问题