OOCSS对网站性能的影响 - 较短的css但较大的html与更多的类

Question

我今天正在阅读关于OOCSS的文章,它说使用这种方法有两个好处

1. CSS越短=性能越好
2. 更好的可维护性

我同意第二点,但第一个好处是通过在html中添加更多类来增加可重用性来缩短css,但整个网站的CSS文件可以在浏览器中缓存,但每页的HTML都不同.

我的问题是,较短的CSS文件如何通过在html中添加更多字节(类)来提高整体网站性能,而css是单个文件,将在缓存中一次下载？

Answer 1

通过简化CSS选择器,保持属性DRY和class在HTML中使用属性,回流和重绘(理论上)将是轻量级的,因此增加了站点的平滑性和整体性能.

回流和重绘时会出现

• 调整窗口大小
• 改变字体
• 添加或删除样式表
• 内容更改,例如用户在输入框中键入文本
• 激活CSS伪类,例如:hover(在IE中激活兄弟的伪类)
• 操作类属性
• 一个操纵DOM的脚本
• 计算offsetWidth和offsetHeight
• 设置style属性的属性

(以上列表是从Reflows&Repaints中复制的:CSS性能使你的JavaScript变慢？作者:OOCSS的创建者Nicole Sullivan)

另请观看此视频,了解回流和重拍的实际操作:http://www.youtube.com/watch？v = ZTnIxIA5KGw (约30秒的时间)

也就是说,轻松解析的CSS也可以提高网站的响应能力(如平滑度),而不仅仅是可维护代码的质量.