[性能优化 | 青训营笔记]

常见的前端性能优化手段

1. 减少Http请求

原因：每个 HTTP 请求都需要建立连接、发送请求、等待响应和关闭连接，这些过程都需要消耗时间和资源，请求过多，就会增加加载时间和带宽占用

解决方法：

1. 合并文件：多个css文件和js文件合并
2. 使用雪碧图（精灵图），减少图片请求次数
3. 使用字体图标代替图片（base64也可以）
4. 使用缓存
5. 压缩文件（Gzip）
6. 延迟加载（懒加载）和预加载
7. 使用CDN
8. 使用HTTP 2.0 （多路复用、头部压缩、服务器推送，二进制分帧）

2. 压缩和缩小 JavaScript、CSS、HTML 文件

1. JavaScript 文件压缩：使用工具如 UglifyJS、Terser 等对 JavaScript 文件进行压缩
2. CSS 文件压缩：使用工具如 Clean-CSS、cssnano 等对 CSS 文件进行压缩
3. HTML 文件压缩：使用工具如 HTMLMinifier、htmlnano 等对 HTML 文件进行压缩
4. 代码分离：将代码分离成多个文件，按需加载
5. css放在顶部，js写在底部

3. 图片优化

1. 图片格式：png、jpeg等格式换成webp（体积变小）
2. 压缩，缩小尺寸
3. 懒加载
4. CDN
5. 矢量图
6. 对于静态资源使用base64编码，内联在css中（base64的缺点是需要消耗cpu进行解码）
7. 雪碧图：将多张小图片合并成一张大图，并通过 CSS 中的 background-position 属性来控制显示不同的区域，以减小 HTTP 请求次数和文件大小
8. 用css替代一些简单的图片效果

4. 使用http缓存

首次请求，服务器端发送缓存后，客户端存在本地，就期限内不用反复请求服务器端

5. 使用CDN

CDN又叫内容分发网络，可以将静态资源（如图片、样式表、脚本文件等）缓存到距离用户较近的节点上，用户请求这些资源时，会从距离最近的节点获取资源，而不是从服务器上获取（服务器离用户越远，延迟越高），能够有效提高资源的加载速度

webpack分割代码后，提取的公共组件（vue.js、vue-router.js....）就可以放在CDN上

6. 服务器端渲染SSR

在服务器端将页面组装好之后再返回给客户端，而非在客户端进行页面组装（CSR）