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
