前端性能优化(二)空间角度：降低资源占用

一、为什么要进行性能优化

对于一个产品来说，用户的体验是最重要的。当页面加载时间过长，交互操作不流畅时，会给用户带来很糟糕的体验，会导致用户流失。

二、前端常见的性能优化手段

对于前端来说，性能优化可以从两个大方面来解决。本篇详述第一种：减少耗时。

2.1.时间角度优化：减少耗时(用户的等待时长)

页面加载耗时、渲染耗时、网络耗时、脚本执行耗时

2.2.空间角度优化：降低资源占用(页面卡顿或者卡死)

CPU占用、内存占用、本地缓存占用

三、降低资源占用

相比页面加载的耗时优化，对资源占用的优化会比较少。因为资源占用常常会直接受到用户设备性能和适应场景的影响。大多数情况下优化效果比耗时优化有很多的局限性。

资源占用常见的优化方式：

3.1.合理使用缓存，不滥用用户的缓存资源(如，浏览器缓存、IndexDB)，及时进行缓存清理。

3.2.通过使用数据结构享元的方式，减少对象的创建，从而减少内存的占用。

3.3.避免存在内存泄漏，如，尽量避免全局变量的使用，及时解除引用等。

3.4.避免复杂/异常的递归调用，导致调用栈的溢出。

四、如何在项目中进行性能优化

性能优化通常需要投入不少的人力和成本来完成。因此，更多时候，把它当做一个项目的方式来进行管理，从项目管理的角度来讲，性能优化工作会拆解为以下部分内容：

4.1.确定优化的目标

4.1.1确定性能优化的目标，涉及到以下6个性能数据

1. 1. 网络资源请求时间
   2. 浏览器开始渲染的时间(Time To Start Render,TTSR)
   3. 页面解析完成的时间(Dom Ready)
   4. 页面可交互时间(Time To Interact,TTI)
   5. 总阻塞时间，代表页面处于不可交互状态的耗时(Total Blocking Time,TBT)
   6. 从用户首次交互到浏览器响应时间(First Input Delay,FID)

要选择合适有效的指标进行定义，由于前端框架的出现，Page Load(耗时)已经难以作为页面可见时间的关键点，因此，可以用框架提供的生命周期或者Largest Contentful Paint(LCP，关键内容加载的时间点)。

4.1.2.目标和预期的确定(两种方式)

对需要关注的性能数据进行定义完成后，可以对目标和预期进行确定，一般来说有以下两种方式：

1. 对比原先数据优化一定比例，比如TTI(页面可交互时间)耗时减少了30%。
2. 通过对竞品进行分析确定目标，如，比竞品耗时减少20%。

4.2.确定技术方案

确定了目标和预期后，可以根据预期来调整优化的方向和技术方案。

4.2.1.为了达成目标，对合适的技术优化点进行罗列之后，需要对每个优化点进行简单的调研以确定它们的优化效果。

4.2.2.根据每个优化点的优化效果以及相应的工作量评估，以预期为目标，选择性价比最优的技术方案。在技术方案确定后，则需要对工作内容进行排期，并按计划执行。

4.2.3.优化完成后，需要结合目标和预期，对优化效果进行复盘。同时，可以提出未来优化的规划。

4.3.对工作内容进行排期，并按计划执行

4.4.优化完成后，结合目标和预期，对优化效果进行复盘