最近看了很多页面优化方面的文章,集合多篇文章,整理总结如下:
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、慎用 * 通配符
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 { }
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
最简单的就是为页面中所有图片指定宽度和高度。
此处方法很多,有很多
最后:浏览器越来越强悍,上面写的更多的是良好的代码规范,优化效果不一定明显
参考:
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
新博客已移至:http://keenwon.com