前端主要优化点
- 减少请求
- 减少对DOM的操作
- 压缩代码
- 压缩图片
- 依赖包按需引入
- 使用CDN
先得知道前端是干啥的，然后才能对症优化
前端主要的工作： 界面渲染和交互
交互：这一块与后端息息相关，所以接口的响应时间也算是在(后端)优化之内的事
界面渲染：
- 原生JS中是对DOM减少操作，页面的DOM元素越少渲染越快
- 在（React、VUE）框架中有虚拟DOM的存在，所以都是基于数据驱动的，影响渲染的主要原因是数据和计算时间
优化点
减少HTTP请求
请求越少，前端的交互就越少，前端交互越少，对操作DOM就越少，渲染就越快
使用服务器渲染
就是把前端的任务压力给到后端去完成，后端服务器渲染完成后将html文件返回过来浏览器可以直接渲染
静态资源使用CDN
在本地中有CDN资源就可以减少对服务器的请求，从而更快渲染页面。
CDN（分发策略）会把源站的资源缓存到CDN服务器，当用户访问的时候就会从最近的CDN服务器拿取资源而不是从源站拿取，服务器离我们越远，响应时间就越长。这样做的好处是分散了压力，同时也会提升返回访问速度和稳定性。
文件压缩
webpack插件压缩：
- compression-webpack-plugin
- uglify-plugin
- mini-css-extract-plugin
- html-webpack-plugin
- image-webpack-loader
减少重绘重排
重排：当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树，这个过程叫重排。
重绘：当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕，这个过程叫重绘。不是所有的动作都会导致重排，例如改变字体颜色，只会导致重绘。
重排会导致重绘，重绘不会导致重排
使用 transform 和 opacity 属性更改来实现动画
在 CSS 中，transforms 和 opacity 这两个属性更改不会触发重排与重绘，它们是可以由合成器（composite）单独处理的属性
