前言
性能优化问题是区分一个前端工程师能力的重要指标，一个不会性能优化的工程师注定不会做出一个优秀的产品，因为任何一款优秀的产品必然是经过精细打磨的产品，而性能优化就是这打磨的过程，无论是在实际工作中还是面试中性能优化问题都是面试必考的问题，下面让我们来一起解决这个问题吧~
优化思路
当我们在浏览器地址栏上输入URL到页面显示出结果的时候，我们都知道时间主要消耗在了网络传输和页面渲染上，因此我们主要从这两个方面出发进行性能优化。
网络传输性能优化
1. 使用HTTP2
HTTP2相对于HTTP1进行了下面的优化：
- 二进制分帧层
- 多路复用
- 首部压缩
- 请求优先级
- 服务器推送
- 流量控制
2. 资源打包压缩
资源打包压缩主要是通过webpack压缩以下内容：
- 压缩JS代码：通过webpack的production模式压缩JS代码。
- 压缩HTML代码：使用html-webpack-plugin的minify进行压缩。
- 压缩CSS代码：使用cssnano压缩css，在postcss.config.js中进行配置。
3. 图片资源优化
在网络传输中真正占用大量网络资源的不是文件而是图片，如果对图片进行了优化，可以看到立竿见影的效果。主要优化措施如下：
- 在html中尽量不要放图片。
- 使用雪碧图：雪碧图可以减少请求的次数。
- 使用字体图标：字体图片能够像图片一样工作，但是资源占用和图片请求比起来小很多。
- 使用webp：webp格式的图片相对根据国家节省网络带宽。
4. 使用CDN
CDN指的是在网络不同地点部署节点服务器，将源站内容分发至所有CDN节点，使得用户可以就近获得所需内容。CDN提高了网站的响应速度、降低了延迟。
5. 使用预加载
当一个页面加载时，可能会加载很多第三方资源，但是这些资源的优先级是不同的，一些重要资源需要提前进行获取，因此我们可以使用link标签来进行DNS预解析、预加载、预渲染来管理页面资源的加载。
6. 减少DNS查找
尽量将资源放在同一域名下面，因为域名越少，DNS查询就会越少。
7. 发送请求时使用防抖和节流策略
防抖节流可以避免短时间内发送过多的重复请求。
页面渲染性能优化
1. 减少重排和重绘的发生
- 重排：指的是元素布局发生修改，导致页面重新排列。
- 重绘：所有对元素的视觉表现属性的修改，都会引发重绘。
重排和重绘都会影响性能，要想提高网页性能尽可能降低重排和重绘的频率。重排是由CPU处理的，而重绘是由GPU处理的，GPU的处理效率要相对更高，重排一定发生重绘，但是重绘不一定引起重排，所以要尽可能的降低重排和重绘的发生。
2. DOM元素离线更新
当对DOM元素进行操作的时候，尽量使用documentFragment对象进行离线操作，待元素组装完成之后再一次插入页面。
3. 避免CSS、JS阻塞
CSS资源优于JS资源的引入，JS应当尽量少影响DOM的构建。
经典问题
RQ1：首屏加载如何优化？
主要方法包括以下步骤：
- 动态加载路由
配置路由的时候，以函数的形式加载路由，只有在解析给定的路由时，才会加载路由。
- 合理使用缓存
设置强缓存、协商缓存、localstorage等。
- UI框架按需加载
不要引入整个UI库，尽量进行按需加载。
- 避免重复加载组件
可以使用webpack将多次使用的包抽离出来，放入公共依赖文件，避免重复加载组件。
- 压缩图片资源
雪碧图、字体图标、webp等。
-
开启Gzip压缩
-
使用SSR服务端渲染
组件或页面通过服务器生成html字符串，再发送到浏览器。