页面优化

为什么要优化?

提升网页响应速度
对搜索引擎、屏幕阅读器友好

提高可读性，可维护性

如何优化:

减少请求
减少文件大小
提升页面性能
可读性、可维护性

减少请求

图片合并
减少CSS文件合并

图片合并
通过sprite，把小图标合并成一张图片。

减少CSS文件合并

多个CSS文件合并为一个
少量CSS样式内联
避免使用import的方式引入css文件

每个import都会产生一个请求，而且请求是同步的，第一个请求完成后才会进行第二个请求。

减少文件大小

1.减少图片大小

选择合适的图片格式:PNG / JPG

压缩图片

ImageOptim

2. CSS值缩写

margin/padding/border/border-radius/font/background

3.省略值为0的单位

4.颜色值最短表示

5. CSS选择器合并

CSS雪碧图:

清除浮动:

6.文件压缩 cssmin

提升页面性能

1.加载顺序

2.减少标签数量

3.选择器长度

.m-nav ul li a:hover{color:red;}→.m-nav a:hover{color:red;}

4.耗性能属性

5.图片设置宽高

6.所有表现用CSS实现

用JS,每次都需要重绘列表，而使用CSS,可以把多次渲染合并成一次渲染。