1.慎重选择高消耗的样式
高消耗的属性在浏览器进行绘制时需要进行大量的计算，特别消耗性能，因此在使用时要特别注意，主要包括：
- border-radius
- border-shadows
- transforms
- transparency
- CSS filters (性能杀手)
2.避免过分重排
当元素重排的时候，浏览器需要重新计算布局的位置和大小，常见使元素重排的属性有：
- width / height
- padding / margin
- position / top / bottom / right / left
- border-width
- font-size / font-weight
- display
- float
- text-align / vertical-align
- overflow / clear
- line-height / min-height
3.正确使用Display属性
Display属性会影响页面的渲染，在使用的时候一定更要注意：
- display:inline后面不应该再使用width、height、margin、padding以及float等;
- display:inline-block后不应该再使用float；
- display:block后不应该再使用vertical-align；
- display:table-**后不应该再使用margin或者float；
4.不滥用Float
Float会改变文档流，在渲染的时候计算量比较大。尽量减少使用。
5.提升CSS选择器性能
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是尽量避免使用消耗更多匹配时间的选择器。我们可以先了解下CSS选择器的匹配机制，以下以子选择器为例：
#header > a{font-weight:bold;}
大多数人的阅读习惯都是从左到右，在编写代码的时候也是习惯从左往右，而浏览器中CSS匹配方式则是恰恰相反，CSS选择器是按照从右往左的的规则进行匹配的，上述的子选择器看起来很高效，实则匹配开销很高，浏览器必须遍历完页面中的所有a元素，并且确定其父元素的id是否为header.
上述的例子中要是将子选择器改为后代选择器，则开销会更多，再遍历页面中所有a元素后还需要向其上级遍历直到根节点。
#header a{fongt-weigth:bold;}
在理解了CSS选择器从右到左的机制后，我们就会知道只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，知道找到和规则匹配的选择符。或者因此不匹配而退出。
（1）避免使用通用选择器
/* 不推荐 */
.content * {color: red;}
浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素，直到文档的根节点。因此其匹配开销是非常大的，所以应避免使用关键选择器是通配选择器的情况。
（2）避免使用标签或class选择器限制id选择器
/* 不推荐 */
button #backButton {…}
/* 推荐 */
#newMenuIcon {…}
（3）避免使用标签限制class选择器
/* 不推荐 */
treecell.indented {…}
/* 推荐 */
.treecell-indented {…}
（4）避免使用多层标签选择器。使用class选择器替换，减少CSS查找
/* 不推荐 */
treeitem[mailfolder="true"] > treerow > treecell {…}
/* 推荐 */
.treecell-mailfolder {…}
（5）避免使用后代选择器
/* 不推荐 */
treehead treerow treecell {…}
/* 推荐 */
treehead > treerow > treecell {…}
/* 或者 */
.treecell-header {…}
（6）推荐使用继承
CSS中常见的可继承属性有：
- 字体系列属性
font / font-family / font-weight / font-size / font-style / font-stretch .... - 文本系列属性
text-indent / text-align / line-height / word-spacing / letter-spacing / color / direction ... - 表格布局属性
caption-side / border-collapse / border-spacing / empty-cells / table-layout - 列表布局属性
list-style-type / list-style-image / list-style-position / list-style
CSS中常见的不可继承属性有：
- 文本属性
vertical-align / text-decoration / text-shadow / white-space - display属性
- 背景属性
background / background-color / background-image / background-repeat / background-position - 定位属性
float / clear / position / top / right / bottom / left / overflow / clip / z-index - 元素模型属性
元素常见的带单位的属性（如：width / height / border / margin / padding等）
注：内联元素不能继承text-indent和text-align这两个文本属性
/* 不推荐*/
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
/* 推荐 */
#bookmarkMenuItem { list-style-image: url(blah) }
