http://www.orzpoint.com/profiling-css-and-optimization-notes/
1. 其实并不存在最快的规则,我们通常做法是把样式模块合并到一个文件中试用,这样会导致其中的一部分样式并没有被特定的页面用到。其实把没用的样式规则拿掉是优化 CSS 的最好的方法之一,因为这样的话就可以省去多余的样式匹配,当然合并多个文件到一个大文件还是有好处的,比如说可以减少请求数,但是我们应该只把跟当前页面有关的样式打包到一起。
其实这也不算什么新发现了,Page Speed 早就有过这条建议。不过,我还被它的效果吓到了,去掉多余样式让我节省了大约 200-300ms 的选择器匹配时间(根据Opera 调试工具的结果)。
2. 减少 reflow,这是另外一条总所周知的规则,起了非常大的作用。性能消耗多的样式规则在只有少量 reflow/repaint 的时候并不没有产生那么的性能消耗,但是一条很简单的规则却有可能让这个网页慢起来,所以减少 reflow 必须和减少样式复杂度一起做起来。
3. 性能消耗最大选择器应该是 * 和多 class 选择器(比如 .foo.bar, .foo.bar.baz qux),我们都最大这个,不过最好还是通过分析确定一下
4. 要注意那些本来不需要用的全选符 *,我发现过一个选择器是这样的:button > *,但是我找遍了整个网站,发现所有按钮只有一个 <span> 在里面,所以把 * 换成 span 就可以换来很多的提升,因为浏览器已经不需要去匹配所有的元素了(因为从右向左匹配原则),只需要查找所有的 span,而 span 的数量远比所有元素少,然后再查找父元素是 button 的 span 即可,所以应该把 * 替换成其他标签,不过通常比较麻烦。这种优化的问题是损失了一些可扩展性,因为修改 HTML 之后也需要修改 CSS,你也不能日后再去修改按钮的样式,这样会产生一些无用的规则,所以这条规则我还不怎么确定,还是针对自己的实际情况来做优化吧,除非渲染引擎修改选取规则否则这种优化可以先忽略(译者注:其实通过加 class 而不用 tag 就可以解决这个问题)。
6. 在 Opera 和 WebKit 中 [type=”…”] 比 input[type=”…”] 更加耗时,可能是浏览器认为属性检测对于特定的标签来说才是比较通用方法。
7.跟居 Oprea 的分析工具, ::selection 和 :active 是最为耗时的选择器。可理解的是 :active 为什么还是,但是 ::selection 就不知道为什么了,可能是分析工具的bug,或者浏览器本身的渲染方式决定。
8. 在 Opera 和 WebKit 中, border-radius 是最耗时的属性之一,甚至比 shadow 和 gradient 和耗时,要注意的是它不影响布局生成时间只影响 repaint 时间。
总结
.ie7 .foo .bar
)包括想这样不规范的类型选择符[type="url"]
)