关于优化

加载优化

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 -- 

posted @ 2020-03-19 10:53  晨の风  阅读(140)  评论(0编辑  收藏  举报