一、为什么要进行性能优化
对于一个产品来说，用户的体验是最重要的。当页面加载时间过长，交互操作不流畅时，会给用户带来很糟糕的体验，会导致用户流失。
二、前端常见的性能优化手段
对于前端来说，性能优化可以从两个大方面来解决。本篇详述第一种：减少耗时。
2.1.时间角度优化：减少耗时(用户的等待时长)
页面加载耗时、渲染耗时、网络耗时、脚本执行耗时
2.2.空间角度优化：降低资源占用(页面卡顿或者卡死)
CPU占用、内存占用、本地缓存占用
三、浏览器页面加载过程
减少耗时的性能优化与浏览器的页面加载过程紧密联系。浏览器页面加载过程分为以下几个步骤：
- 网络请求，服务端返回HTML内容。
- 浏览器一边解析HTML，一边进行页面渲染。
- 解析到外部资源，会发起HTTP请求，加载JavaScript代码时会暂停页面渲染。
- 根据业务代码加载过程，会分别进入页面开始渲染、渲染完成、用户交互等阶段。
- 页面交互过程中，会根据业务逻辑进行逻辑运算、页面更新。
四、耗时优化---网络请求优化
网络请求优化：减少网络资源的请求和加载耗时
4.1.减少DNS查询时间
使用浏览器的DNS缓存、计算机DNS缓存、服务器DNS缓存。
4.2.合理的使用CDN,有效的减少网络请求耗时
4.3.对请求资源进行缓存
包括但不限于使用浏览器缓存、HTTP缓存、后台缓存，使用Service Worker、PWA等技术。
4.4.移除代码中无用的部分
使用Tree-shaking、代码分割、移除用不上的依赖项等。
4.5.对请求资源进行合理的拆分
(CSS、JavaScript脚本、图片/音频/视频等)，减少请求资源的体积。
4.6.对资源进行压缩，减少传输数据的大小
4.7.使用HTTP/2、HTTP/3，提升资源请求速度(一般效果不是特别明显)
4.8.对请求进行优化
多个请求可以进行合并、减少通信次数；对请求进行域名拆分，提升并发请求数量。
五、耗时优化---首屏加载优化
请求资源返回后，浏览器会进行解析和加载，这个过程会影响页面的可见时间，通过对首屏加载的优化，可以有效的提升用户体验。
将页面内容尽快展示给用户，减少页面白屏时间，优化方案主要包括加载耗时优化+使用页面过渡效果。
5.1.加载耗时优化(性能和渲染耗时优化)
5.1.1.对页面进行分片/分屏加载，将页面可见/可交互时间提前。
5.1.2.优化资源加载的顺序和粒度，仅加载需要的资源，通过异步加载方法加载剩余资源。
5.1.3.使用差异化服务，如，读写分离，对于不同场景按需加载所需要的模块。
5.1.4.使用服务器直出渲染(SSR)，减少页面二次请求和渲染的耗时。
5.1.5.使用秒看技术，通过预览方式(如，图片)提前将页面内容提供给用户。
5.1.6.配合客户端进行资源预请求和预加载，如，使用预热Web容器。
5.1.7.配合客户端将资源和数据进行离线，可用于下一次页面的快速渲染。
5.2.使用页面过渡效果
使用页面过度效果可能更倾向于产品策略。很多时候，产品策略的调整给用户带来的体验优化效果不亚于技术手段优化。因此也需要重视。
常见的页面过渡效果方案，如下两种：
5.2.1.使用骨架屏进行预渲染。
5.2.2.使用过渡动画让用户感知到页面正在顺利加载。
总结：从而避免用户对于白屏页面或者静止页面产生烦躁或者困惑。
六、耗时优化---渲染过程优化
用户在浏览器页面过程中，也会触发页面的二次运算和渲染，此时需要进行渲染过程的优化。
渲染过程优化，主要是减少用户的操作等待时间，避免出现卡顿或者卡死的情况。
6.1.使用资源预加载，在空间时间，提前将用户可能需要用到的资源进行获取并加载。
6.2.减少DOM数量，减少/合并DOM操作，减少浏览器渲染过程中的计算耗时。
6.3.通过合理利用浏览器的GPU合成，提升浏览器渲染效率。
6.4.使用离屏渲染，在页面不可见的地方提前进行渲染(如，Canvas渲染)。
6.5.通过将页面渲染帧率保持在60FPS左右，提升页面交互和渲染的流畅度。
除了上述5种方式以外，渲染过程同样可以使用页面过渡效果动画方式，例，在加载中，给到用户及时反馈，来提升用户的体验。
七、耗时优化---计算/逻辑运行提速
对于运算逻辑复杂、计算量较大的业务逻辑，需要进行计算/逻辑运行提速。
7.1.通过将JavaScript大任务进行拆解+并行计算的方式，有效的降低整体计算耗时，如，使用Web Worker。
7.2.通过使用运行效率更高的方式来减少计算耗时，如，使用Webassembly。
7.3.通过将计算过程提前，减少计算等待时长，如，使用AOT技术。
7.4.通过使用更优的算法或存储结构，提升计算效率，如，VSCode使用红黑树优化文本缓冲区的计算。
7.5.通过将计算结果缓存的方式，减少运算次数。
八、总结
1.在前端性能优化实践中，网络请求优化和首屏加载优化，使用频率最高，不管项目规模如何，各个模块和逻辑是否复杂，这两个方向的耗时优化，都是比较通用的。
2.相比之下，对于页面内容较多、交互逻辑、运算逻辑复杂的项目，才需要针对性的渲染过程优化和计算/逻辑运行提速。