# Web性能优化
根据业务情况，定义Web性能指标。然后 选取数据参考点、收集数据 ，随后分析每个关键指标反映的数据，最后采取优化手段。
# 性能指标
一般会关注 2 个类指标：web-vitals指标、传统指标。
# web-vitals指标
| 展示名 | 字段名 | 达标标准 |
|---|---|---|
| LCP | 最大内容渲染 | 75% 用户小于 2 秒 （云音乐内部定义阈值） |
| FCP | 首个内容渲染 | 75% 用户小于 1 秒 |
| CLS | 累计布局偏移 | 75% 用户小于 0.1 |
| FID | 首次交互延时 | 75% 用户小于 0.1 秒 |
75% 是为了应对极端情况
# 传统指标
- 白屏时间：开始解析渲染DOM的时间（即：
FCP）- domLoading - fetchStart
- 首屏时间：“第一屏内容” 渲染完成的时间
- 第一屏最后一个内容 - fetchStart
- 用户可操作时间：用户可操作时间（即
DomReady）- domContentLoadedEventEnd - fetchStart
- 页面完全加载时间：页面所有资源加载完成时间（
load事件触发，也叫 “总下载时间” ）- loadEventStart - fetchStart
秒开率 指的是 DomReady 在
1s内的数据占比。
# 首屏性能优化
首屏性能优化 可以从 2 个方面进行：
- 资源体积
- 资源加载
具体方案还取决于：实际需求、优先级、综合成本、ROI等。
# 资源体积
目标：体积更小的资源包。
- 拆包、减包、压缩
- 图片优化
# 资源加载
目标：更快地展示内容。
- 懒加载
- HTTP缓存
- CDN分发
- SSR
- （PWA）ServiceWorker + CacheStorage
- （Hybrid）H5离线包、数据预请求
- Varnish：缓存服务器的反向代理
缓存触发顺序：ServiceWorker -> HTTP缓存 -> 离线包 -> CDN -> Varnish
TIP
# 指标收集
收集指标数据的 2 种方法：
- window.performance.timing
- web-vitals
# window.performance.timing
window.performance.timing 可以获取 页面渲染过程中，各个时间段的时间戳。
几个重要的时间属性：
navigationSart：上一个文档unload的时刻（若上一个文档为空，值为fetchStart）fetchStart：浏览器请求文档 就绪 的时刻（下一步是检查缓存之前）domLoading：开始解析DOM 的时刻domContentLoadedEventEnd：DOM解析完成 的时刻（即：触发DOMContentLoaded事件）loadEventStart：load事件触发 的时刻loadEventEnd：load事件结束 的时刻
DOMContentLoaded：页面元素加载完毕，可正常交互。但图片资源可能还未加载完成；
load：指页面上 所有资源 都加载完成。
# web-vitals
Web-Vitals 底层是通过拿到 PerformanceEntry（性能数据的实例） 然后进行分析。
如LCP：浏览器 会通过发送一个
PerformanceEntry（type为largest-contentful-paint）来标识最大的内容元素。