页面优化

标签：

页面优化：

1、减少页面请求 ：图片合并、减少css文件请求

2、降低文件大小：合适的图片格式、css值缩写、省略值为0的单位、颜色值最短表示、css选择器合并、文件压缩

3、提升页面性能：css放在head中，js放在body的底部、减少标签数量、选择器长度、少用耗性能属性、用css实现所有表现、设置元素的宽高

4、可读性， 可维护性：代码规范；文件名变量名规范、语义化、尽量避免Hack、模块化、注释

一、减少请求

1.图片合并

2.css文件合并

3.多个css文件合并为一个

4.少量css样式内联（把少量css样式直接内敛到html页面上，这样可以直接把请求取消掉）

5.避免使用import引入css文件，每个import语句都会产生一个请求，import请求同步，必须第一个完成才能进行第二个请求

二、减少文件大小

1.减少图片大小

选择合适的图片格式

压缩图片（无损、有损）

ImageOptim

ImageAlpha

JPEGmini

...

2.css值缩写

通过一些缩写来减少css文件大小

margin

padding

border

border-radius

font

background

...

并不是所有的值都需要缩写，因为缩写会把所有值都设置一遍，有的时候我们并不需要，需要根据需求来

省略值为0的单位

颜色值最短表示

css选择器合并

文件压缩（上线时，压缩，去除空格）

YUI compressor

cssmin

...

三、页面性能

1.加载顺序

css文件放在head标签内，先加载

js脚本放在body底部（js加载和执行会阻塞页面其他的加载）

2.减少标签数量

3.减少选择器长度

4.少使用耗性能属性

5.图片设置宽高

四、可读性和可维护性

1.规范

2.语义化

3.尽量避免hack

4.模块化

5.注释

页面优化

标签：

原文地址：http://www.cnblogs.com/nieying/p/5611698.html