日期:2014-05-17  浏览次数:20600 次

css的一些要点
针对减小浏览器reflow的css优化:
1. 避免inline style,因为它们会造成页面reflow
2. 将动画放在absolute或者fixed的元素上,它们不会影响其他元素的布局,因此不会造成reflow。
3. 避免table布局,根据Mozilla的说法,即使是很小的改变,也会造成table中所有节点的reflow

在老的浏览器上,
1. 在*(通用选择符)中设置太多样式
2. 使用太多inherit
3. 滥用IE表达式值——每次该rule被使用时,它们就被计算一次。(比如IE下经常使用的png图片透明)
4. 加载过多外部资源,images, css file

根据YSlow
1. 将css links放在页首
2. 使用<link>而非@import
3. 合并css文件
4. 压缩css文件

1. 越具体越好(div.content比*好)
2. 避免一长列的后续规则(descendant rules)(div.content div.culumnHead h2不好……)
http://www.thebrightlines.com/2010/07/28/css-performance-who-cares/ ——合理的态度

google's rule:低效的典范
1. 后继选择器:
          a. 使用 * 通配符选择器,比如 body * {}, .hide-scrollbars * {}
          b. 使用标签选择器作为关键选取符,比如 ul li a {}, #footer h3 {}, *html #atticPromo ul li a {}
2. 孩子或近邻选择器:
          a. * 比如, body > * {}
          b. 标签,比如,ul > li > a {}
3. 冗余
          比如, ul#top_blue_nav {}
4. 在非链接(anchor)上使用:hover伪类
          在IE 7和8下,如果是quirkmode的话,这个hover会被忽略;如果是严格模式的话,会造成性能下降

google's rule:给image设好(与之相匹配的)宽度和高度,防止不必要的reflow, repaint。(也可以在其块级父元素(比如div)上设好尺寸)

google's rule: 给html文件提前设好charset,这样浏览器一开始执行脚本了。
     1. 建议在http header中设置charset
     2. html的head中meta标签中设置charset,content type

Reference:
http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
https://developer.mozilla.org/en/Writing_Efficient_CSS