最近看了很多页面优化方面的文章，集合多篇文章，整理总结如下：
1、样式放头上，脚本放脚下。不内嵌，只外链。使用 引用样式表，而不是通过 @import 导入。
* 不赞成：<p style=”font-size: 14pt ;”>Home</p>
* 建议用：<link href="style.css" rel="stylesheet" type="text/css"/></link>
2、十六进制的颜色值对的位数和大小写
编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成：#f3a
* 建议用：#FF33AA
3、display与visibility的差异
他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
* 不赞成：visibility:hidden
* 建议用：display:none
4、border:none;与border:0;的区别
和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
* 不赞成：border:0;
* 建议用：border:none;
5、不宜用过小的背景图片平铺
不要使用过小的图片做背景平铺，这就是为何很多人都不用 1px 的原因，宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。
* 不赞成：宽高8px以下的平铺背景图片
* 建议用：衡量适中体积及尺寸的背景图片
6、慎用 * 通配符
所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
7、慎用IE滤镜
IE的滤镜除了比较消耗资源外也有兼容性问题。当中有让PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。
* 建议用：个别透明图片用 gif，其余用 png
8、选择器
<1>. 有四种目标选择器：ID, class, tag和通用符。看下他们各自的效率如何:
#main-navigation { } /* ID (最快) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (最慢) */
#content [title='home'] /* Universal(慢) */
<2>. 尽量不使用后代选择器，后代选择器是CSS里最昂贵的选择器
* 不赞成：html body ul li a { }
* 建议用：<a class="link"></a> .link { }
<3>. 尽量不要用标签修饰
* 不赞成：ul#main-navigation { } ID是唯一的，所以不需要用标签修饰ul，这只会让它更低效。
9、合理使用简写
例如margin：
* 不赞成：
margin-top:1px; margin-right:1px; margin-botton:1px; margin-left:1px;
* 建议用：
margin:1px 1px 1px 1px;
缩写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同，则可以省掉：
margin:1px;//四个方向的边距相同，等同于margin:1px 1px 1px 1px; margin:1px 2px;//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px margin:1px 2px 3px;//右边距和左边距相同，等同于margin:1px 2px 3px 2px; margin:1px 2px 1px 3px;//注意，这里虽然上下边距都为1px，但是这里不能缩写。
其他的像border，font，background等也进行简写，不建议简写color（第二点）
10、CSS重用优化
CSS代码的共用属性提取来达到节约代码、维护方便。
* 不赞成
.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}
* 建议用
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }
11、尽量减少浏览器reflow和repaint
最简单的就是为页面中所有图片指定宽度和高度。
当浏览器勾画页面时，它需要能够流动的，如图片这样的可替换的元素。提供了图片尺寸，浏览器知道去环绕附近的不可替换元素，甚至可以在图片下载之前开始渲染页面。如果没有指定的图片尺寸，或者如果指定的尺寸不符合图片的实际尺寸，一旦图片下载，浏览器将需要reflows和重新绘制页面。为了防止reflows，在HTML的<img>标签中或在CSS中为所有图片指定宽度和高度。
此处方法很多，有很多相关文章
最后：浏览器越来越强悍，上面写的更多的是良好的代码规范，优化效果不一定明显
参考：
1、http://homepage.yesky.com/458/8225958.shtml
2、http://www.woaicss.com/article/div/css11.htm
3、http://www.daqianduan.com/css-efficiency-browsers-render-speed/
4、http://www.woaicss.com/article/div/css--.htm
5、http://www.zcool.com.cn/article/ZMjE5NzI=.html
6、浏览器渲染原理，reflow和repaint http://www.cnblogs.com/beixiaosmail/archive/2012/02/04/2338090.html