前端性能优化

目录

1.减少 HTTP 请求数量

2.使用http2，需要https支持

3.服务器压缩

4.合理利用缓存

5.JS 相关 

6.CSS 相关

7.图片格式

---

1.减少 HTTP 请求数量

    由于现代浏览器限制的并发请求数量为 5-6 个，每次建立 HTTP 请求耗时非常大，所以在开发过程中尽量合并请求，例如合并 js，css，图片等。

   缺点：一个文件如果做了小改动，整个文件的缓存都会失效，需要重新加载，无法合理利用缓存。

2.使用http2，需要https支持

如果网站支持 HTTP2，可优先使用 HTTP2 因为 HTTP2 建立的 TCP 链接可以支持多路复用。

3.服务器压缩

 gzip（GUNzip）压缩，目前使用最多的一种压缩格式，可以减少文件的大小。

4.合理利用缓存

1.  利用浏览器的强缓存，服务器协商缓存时间，可以减少服务器的压力。
2. ajax 缓存
3. 合理使用 localStorage， sessionStorage 

5.JS 相关 

1.  js 放在 body 结尾之前，也可以利用 async和defer属性，实现异步加载
2. 使用节流和防抖，减少触发频率
3. 避免循环操作 DOM
4. 移除无用代码
5. 按需加载，避免一次性加载无用的 js 文件 

6.CSS 相关

1.  避免使用 @import，使用 link 代替
2. 使用 transform 来实现动画效果
3. 移除无用的 css 代码，减少 css 文件大小
4. 减少回流和重绘 

7.图片格式

1.  合理使用图片格式（可以使用 webp 格式）
2. 图片懒加载
3. 使用雪碧图
4. 使用字体图标