关于优化

加载优化

1. 合并css、js，合并小图，使用雪碧图；

2. 缓存一切可缓存的资源；

3. 使用长cache；

4. 使用外联式引用 CSS、JavaScript；

5. 压缩 HTML、CSS、JavaScript；

6. 使用首屏加载；

7. 使用懒加载；

8. 使用按需加载；

9. 使用滚动加载；

10. 增加 Loading 进度条；

11. 异步加载第三方资源；

 

图片优化

1. 使用图片压缩工具（TinyPNG、智图等）；

2. 使用 CSS、SVG、iconfont 代替图片；

3. webp 优于JPG， png8 优于 gif ；

4. 图片大小、体积限制；

 

脚本优化

1. 减少重绘、重排；

2. 缓存Dom 选择与计算；

3. 缓存 列表 length；

4. 尽量使用事件代理，而非批量绑定；

5. 尽量使用 ID 选择器；

 

CSS 优化

1. CSS写在头部，JavaScript 写在尾部或者 异步加载；

2. 避免重设图片大小；

3. 图片避免使用 dateURL；

4. 避免行内样式；

5. 避免 CSS 表达式；

6. 移除空的 CSS 规则；

7. 不滥用 float ；

8. 值为 0，不需要单位；

9. 小数点前只有 0 ，可省去这个 0 ，如 0.5rem 可简写为 .5rem；

10. 标准化浏览器前缀；

11. 避免选择符看起来像 正则表达式；

 

渲染优化

1. 减少 DOM 节点；

2. 合理使用 requestAnimationFrame 代替setTimeout；

3. Touchmove、scroll 事件会导致多次渲染；

4. 使用 3d 动画触发 GPU 渲染；

 

-- end --