前端项目性能优化

前言

如果你学会了，可以忽略本文章，或去项目经验地图寻找更多答案

---

性能优化的方向

1. 框架
2. webpack
3. 前端通用

---

性能优化的方式

一，加载更快

1. 减少文件体积：js，css，图片压缩
2. 按需加载（懒加载，预加载）
3. 减少用户和服务器的距离
4. SSR服务端渲染

二，减少请求

1. 文件缓存（http缓存）
2. 图片雪碧图
3. 代码合并（合并成一个文件）
4. 本地存储
5. 节流防抖

三，合理渲染

1. 提升代码的执行效率
2. 避免重排，减少重绘
3. css放在head，js放在body最下面
4. 尽早开始执行js，在DOMcontentLoaded触发
5. 对dom查询进行缓存
6. 合并dom操作，一起插入

---

图片优化

图⽚片通常是最占⽤用流量量的，PC端加载的平均图⽚⼤小时是600K，简直⽐js打包后的文件还⼤了，所以针对图⽚片的优化，也是收益不不错的.

不同的场景，使⽤不同的文件类型：
jpg
1. 有损压缩
2. 体积小，不支持透明
3. 用于背景图，轮播图

png
1. ⽆无损压缩，质量高，支持透明
2. ⾊彩线条更丰富，小图，比如logo，商品icon

svg
1. 文本，体积⼩，⽮量图
2. 渲染成本，学习成本

更多先略

---

学习更多

项目经验地图