性能优化

性能优化体系：

在做性能优化前，我们需要考虑以下几个问题

• 在什么场景下遇到了性能问题
• 围绕什么样的性能指标
• 采取了哪些性能优化手段
• 取得了什么样的结果

我们从常见耗时和资源占用两部分开始说起

常见耗时

页面加载过程中，会经历以下阶段

1. 网络请求， 服务端返回HTML内容
2. 浏览器一边解析HTML， 一边进行页面渲染
3. 解析到外部资源， 会发起HTTP请求获取， 加载javascript代码时会暂停页面渲染。
4. 根据业务代码加载过程， 会分别进入页面开始渲染、渲染完成、用户可交互阶段。
5. 页面交互过程中， 会根据业务逻辑进行逻辑运算、页面更新。 根据这个过程， 我们可以从4个方面进行耗时优化： 网络请求优化、首屏加载优化、渲染过程优化、计算/逻辑运行提速。

空间角度优化， 降低资源占用

结合项目进行性能优化

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

1. 确定优化的目标和预期
2. 确定技术方案
3. 对工作内容进行排期，并按计划执行
4. 优化完成后， 结合目标和预期， 对优化效果进行复盘

确定优化的目标和预期

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