CSS 渲染性能优化

如何看待CSS优化

我们可以从两个方面来看性能优化的意义：

1. 用户角度
   网站优化能够让页面加载得更快，响应更加及时，极大提升用户体验。
2. 服务商角度
   优化会减少页面资源请求数，减小请求资源所占带宽大小，从而节省可观的带宽资源。

一个好的交互效果可能是这样的：

当然，性能优化是来自方方面面的。

这里我们主要来看 CSS 方面能够进行哪些性能优化。

1.避免深层次的 node ，譬如：

/* Bad  */
div > div > div > p {color:red;} 
/* Good  */
p-class{color:red;}

2.尽量避免使用 attribute selector，如：p[att1=”val1”]。这样的匹配非常慢。更不要这样写：p[id="id1"]。这样将 id selector 退化成 attribute selector。

/* Bad  */
p[id="jartto"]{color:red;}  
p[class="blog"]{color:red;}  
/* Good  */
#jartto{color:red;}  
.blog{color:red;}

3.通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：

.foo {
  -moz-border-radius: 5px;
  border-radius: 5px;
}

4.遵守 CSSLint 规则

font-faces        　　　　  　　　不能使用超过5个web字体
import        　　　　　　　 　　  禁止使用@import
regex-selectors        　　　　  禁止使用属性选择器中的正则表达式选择器
universal-selector    　　 　　  禁止使用通用选择器*
unqualified-attributes    　　　禁止使用不规范的属性选择器
zero-units            　　 　　　0后面不要加单位
overqualified-elements    　　　使用相邻选择器时，不要使用不必要的选择器
shorthand        　　　　　　　　 简写样式属性
duplicate-background-images    相同的url在样式表中不超过一次

5.不要使用 @import

使用 @import 引入 CSS 会影响浏览器的并行下载。使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载、解析之后，浏览器才会知道还有另外一个 CSS 需要下载，这时才去下载，然后下载后开始解析、构建 Render Tree 等一系列操作。

多个 @import 会导致下载顺序紊乱。在 IE 中，@import 会引发资源文件的下载顺序被打乱，即排列在 @import 后面的 JS 文件先于 @import 下载，并且打乱甚至破坏 @import 自身的并行下载。

6.避免过分重排（Reflow）
所谓重排就是浏览器重新计算布局位置与大小。常见的重排元素：

width 
height 
padding 
margin 
display 
border-width 
border 
top 
position 
font-size 
float 
text-align 
overflow-y 
font-weight 
overflow 
left 
font-family 
line-height 
vertical-align 
right 
clear 
white-space 
bottom 
min-height

7.依赖继承。如果某些属性可以继承，那么自然没有必要在写一遍。