性能优化进阶
Navigation Timing API
Core Web Vitals - 网页核心的性能指标
Largest Contentful Paint (LCP)
a. 衡量装载性能 LCP应该在网页首次加载后2.5s内发生
- 前2.5s内进行最大内容渲染
- 最大内容有哪些？
** img、video、svg、通过URL函数加载的背景图片元素、包含大块内嵌内容的块级元素
b. LCP值低下的原因
- 服务器响应慢
- 阻断渲染的JS、CSS
- 资源的加载时间过长
- 客户端渲染机器的影响
c. 针对性改造
- 服务器的优化-缓存html离线应用、缓存页面资源、减少浏览器直接对资源的请求、缓存机制
- 对图片进行优化，上传格式、压缩处理
- 重写、压缩、注释过滤---减小最终文件大小，加快加载速度 ==> webpack、vite
- 使用CDN---物理上接近请求点
d. 渲染阻断优化
- css+js 延迟加载处理
- 首屏优化 => 懒加载、异步加载
- css模块优化
- SSR => 服务端渲染 弊端：对服务端压力比较大
First Input Delay (FID)
衡量交互性-页面的FID应该小于100ms
- 页面首次输入延迟应该小于100ms
执行阻塞
a. 减少JS执行的时间 - 缩小、压缩JS
- 延迟加载不需要的JS => 懒加载模块 | tree shaking
- 尽量减少未使用的polyfill
b. 分解耗时任务 - 减少长逻辑
- 异步化
c. worker web worker | service worker
Cumulative Layout Shift (CLS)
测量视觉稳定性 - 页面稳定性在加载过程中以及渲染后CLS小于0.1s
- 整体布局的移动可能发生在可见元素在一帧向下一帧改变位置的任何阶段.
- 会带来影响偏移的因素：内容、图片插入，字体
a. 不使用无尺寸元素
b. 整体化内容插入 影响整体布局 => 重排 => 重绘
c. 动态字体控制
