CSS3 - 性能最佳实践是啥？ [关闭]

Posted 2023-02-21

【中文标题】CSS3 - 性能最佳实践是啥？ [关闭]

【英文标题】：CSS3 - What are the performance best practices? [closed]CSS3 - 性能最佳实践是什么？ [关闭]

【发布时间】：2011-11-21 02:38:15

【问题描述】：

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

CSS3 性能是否存在问题？

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

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

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

【问题讨论】：

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

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

@Steven Xu - 哈哈，我想我会先在这里问。如果有人已经在某处在线制作了很棒的资源，那么重新发明***是没有意义的，我最好检查一下，然后做我的实验以扩展已经完成的内容......

【参考方案1】：

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

重绘和重排。 很容易造成不必要的重绘和重排，从而使整个页面滞后。阅读：http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 极端例子：http://files.myopera.com/c69/blog/lag-me.html 滚动和悬停。当您滚动或悬停时，浏览器必须呈现新内容。 Webkit 在这里很聪明，因为它将页面缓存为静态图像，因此当您滚动时它不会呈现页面。但是 - 你可以绕过这个优化，通过在你正在滚动的块中使用透明背景，在悬停时添加旋转，添加 position:fixed 粘性页眉/页脚等等 - 在不同的浏览器中效果会很谨慎，Opera 似乎最目前受影响。 Box-shadow 是邪恶的。 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 渐变是非常酷的新工具，我是它们的忠实粉丝。然而只有几个测试表明你不应该使用它们，如果你打算有很多带有渐变的元素并且需要响应式界面:(但是有一个解决方法/hack， - 使用画布渲染渐变图像并设置它们通过数据 url 作为背景。 透明度很昂贵。如果您有许多相互交叉且半透明的移动元素（不透明度 ！） ) - 预计滞后。通常可以通过限制可以叠加的透明元素的数量来解决。 过渡效果比 JS 好，但是...如果您同时将过渡效果应用于 150 多个元素，Firefox 无法正确呈现过渡效果。 Opera 无法在之前和之后应用过渡。 IE9 根本不支持它们。在使用它们之前进行测试，但总的来说 - 它们比 JS 类似物更快 (jQuery.animate)。 注意 CPU 负载。 跨浏览器很难测量内存使用情况，（但您可以在 chrome 中执行此操作并插值结果，加点盐）但很容易观察 cpu 使用情况（通过 Process Explorer 或系统工具）。尖峰会显示您需要注意的地方。 旧浏览器已经过时了。不要试图现代化 IE6、Firefox 2、Safari 3。那些浏览器从来不应该处理很酷的新东西。别管他们。只需提供具有基本样式的基本内容。剩下的 IE6 用户将对此表示感谢。

【讨论】：

感谢指点！我当然不同意以“没有建设性”为由关闭这个问题的模组。我认为您的 cmets 具有很高的建设性。 TBH，人们正在解决这样的问题似乎很疯狂。

据我所知，box-shadow: inset with radius >= 15px 在 Safari 中确实很慢。对于其他情况：只是不要过度使用此功能。

2D 和 3D transforms 都非常昂贵，animations 也是如此。但在大多数情况下，您会在没有任何外部提示或工具的情况下注意到性能影响；)

transition: all 不好。 ***.com/questions/8947441/…

【参考方案2】：

要对此进行测试，您必须让动画发生 500 或 1000 次并对其计时。

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

【讨论】：

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

不太清楚 flash 是如何进入其中的，我正在研究操纵 dom 元素。 CSS、javascript 和 jquery 使用 css，flash 在完全不同的画布上工作？

我是说性能方面，Flash 在视频和动画方面使用的 CPU 更少。众所周知，HTML5 横幅广告会限制功能强大的 Mac 的 CPU。此外，如果您必须使用 CSS 动画，我建议您使用 JQuery .animate() 以获得更好的性能。我说得很有道理。

根据我的经验，

jquery animate() 性能比 css3 差很多。据我所知，Jquery animate 会根据 css 进行增量超时更改？

与 CSS3 相比，JQuery 可以做的动画非常有限。当我使用它时，我不知道有任何增量超时。