CSS性能问题

Question

样式表（CSS）的哪些方面会导致网站性能不佳？ 什么能真正扼杀CPU？

提前感谢。

Sesh

Answer 1

IE表达式如果过度使用可能会成为杀手锏。每次应用规则时，都会对它们进行重新评估。

Answer 2

CSS？与其说它非常紧张，但在较老的（如第4代）浏览器中，我遇到了以下问题：

• 在*选择器
上做了太多
• 大量使用inherit
• 滥用IE表达式值
• 加载大量外部资源（图像，其他CSS文档）
• 应用了很多你可能称之为div div
的非锚定选择器

基本上任何难以级联或会级联的东西。

Answer 3

浏览器非常擅长快速渲染CSS规则。

可能更重要的是CSS文件的大小。对于大多数网站来说，这不是问题，但对于较大的网站，需要注意的事项。

例如，cnn.com提供了类似150K的CSS。这将需要几秒钟的旧调制解调器，所以CNN应该确保他们的CSS是可缓存和gzip。

Answer 4

我个人从未在CSS中遇到任何可以做到这一点的事情。 Flash内容和超大页面更有可能减慢浏览器的速度。也就是说，我会使用表达式或自定义IE过滤器（通常用于PNG图像的透明度）的图像可能会使用大量的CPU。

Answer 5

扼杀不太旧浏览器的东西是使用“background-position: fixed”la Complexspiral Redux的大背景。

Answer 6

很难影响CPU（IE表达式除外，如sblundy所提到的），但它很容易影响页面加载时间。

尝试关注Yahoo client-side performance guidelines，例如：

• 将CSS链接放在页面顶部
• 使用<link>代替@import
• 合并CSS文件
• 缩小CSS文件

Answer 7

我看过滚动时高分辨率平铺背景图像（通常是jpg或png）导致重大减速（波动效应）的情况。

Answer 8

最有可能的情况是，CSS文件并没有像访问服务器，复杂计算等那样窒息网站。但如果是：

• 至少可以说，编写一个不断发展的轻量级但有效的css文件系统是一门艺术。例如，有效地使用类和ID来利用级联可能很困难，尤其是当项目随着时间的推移而发展时，或者如果编写它的GUI在生命周期的过程中被多次换出。

  < / LI>

• 对于您必须支持的每个旧版浏览器，它会增加性能，特别是如果您使用黑客来完成它。这些可能很棘手，特别是如果彼此分层。条件注释类似 - 浏览器必须解密它遵循的规则，并在呈现之前通读所有。

• 当你可以在背景上平铺或设置颜色时，可以使用全尺寸图像，这也是对标题的拖累。

• （免费拍摄）IE可能需要很长时间才会误导你的风格和元素。