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

发布于 2024-12-05 15:54:30 字数 347 浏览 0 评论 0原文

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

CSS3 性能有问题吗？

如果是，最佳实践是什么？

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

打小就很酷 2024-12-12 15:54:30

哦，是的！如果您喜欢调整性能 - 您会很高兴知道 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/ - 它可能会节省你头上的一些头发。主要思想是 - 浮动元素的子元素会导致修改时的链回流。
Border-radius 非常昂贵，甚至比渐变还要昂贵。不影响布局，但影响重绘。 http://perfectionkills.com/profiling-css-for- fun-and-profit-optimization-notes/
渐变滞后。 CSS渐变是非常酷的新工具，我是它们的忠实粉丝。然而，只有几个测试表明，如果您计划拥有大量带有渐变的元素并需要响应式界面，则不应使用它们:( 不过，有一个解决方法/技巧 - 使用画布渲染渐变图像并设置通过数据 url 将它们作为背景。
透明度的成本很高。 如果您有许多相互交叉且半透明的移动元素（不透明度 < 0、rgba 颜色、png、圆形） corners(!)) - 通常可以通过限制透明元素的数量来解决，
过渡比 JS 更好，但是...如果您同时将它们应用到超过 150 个元素，则 Firefox 无法正确呈现过渡。 IE9 根本不支持在使用它们之前进行测试。比 JS 类似物更快（jQuery.animate）
注意 CPU 负载。跨浏览器测量内存使用情况很困难（但您可以在 chrome 中执行此操作并插入结果，使用一些方法）。盐粒），但很容易观察 cpu 使用情况（通过 Process Explorer 或系统工具）。尖峰会向您展示需要您注意的地方。
旧浏览器就是旧浏览器。不要尝试现代化 IE6、Firefox 2、Safari 3。这些浏览器从来不应该处理很酷的新东西。别管他们了。只需提供基本内容和基本样式即可。剩下的 IE6 用户将会为此而感激不已。

O yes! If you like to tinker with performance - you will be glad to know there is a LOT of performance issues with CSS3.

Repaint and Reflow. Its quite easy to cause unnecessary repaints and reflows, and thus make the whole page lag. Read: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ Extreme example: http://files.myopera.com/c69/blog/lag-me.html
Scroll and hover. When you scroll or hover, browser must render new content. Webkit is smart here, as it caches pages as static images so it does NOT render page, when you scroll. But - you CAN bypass this optimization, by using things like transparent background in the block that you are scrolling, adding rotation on hover, adding position:fixed sticky headers/footers with and so on - effect will wary in different browsers, Opera seems most affected currently.
Box-shadow is evil. Box-shadows have different rendering quality in different browsers (low in Webkit, high in Opera/IE9, varies between Firefox versions) - and thus they their performance impact is different between different browsers - yet, inset box shadow, and box-shadows with large spread radius can cause observable hangs on redraw in any browser.
Floats, tables and their friends are evil. Sounds crazy at first, but read this article (in russian) - http://chikuyonok.ru/2010/11/optimization-story/ - it might save you some hair on your head. Main idea is - children of floated elements cause chain reflows on modification all the way up.
Border-radius is very expensive, even more expensive than gradients. Does not affect layout, but affects repaint. http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
Gradients lag. CSS gradients are very cool new tool, i'm a big fan of them. Yet just a couple of tests have shown that you should not use them, if you plan to have a lot of elements with gradient and require responsive interface :( There is a workaround/hack, though, - using canvas to render gradient images and set them as background via data url.
Transparency is expensive. If you have a number of moving elements that cross each other and are semi-transparent (opacity < 0, rgba color, png, rounded corners(!)) - expect lag. Often can be worked out by limiting the number of transparent elements, which can overlay.
Transitions are better than JS, but... Firefox is not able to render transitions correctly, if you apply them to over 150 elements simultaneously. Opera is not able to apply transitions to before and after. IE9 does not support them at all. Test before you use them, but in general - they are faster than JS analogues (jQuery.animate).
Watch out for CPU-load. Its hard to measure memory usage cross browser, (yet you can do it in chrome and interpolate results, with some grain of salt) but its easy to observe cpu-usage (via Process Explorer or system tools). Spikes will show you places, where you need your attention.
Old browsers are old. Do not attempt to modernize IE6, Firefox 2, Safari 3. Those browsers were never supposed to handle cool new stuff. Leave them alone. Just serve basic content with basic styles. Remaining IE6 users will be thankful for that.