Skip to content

性能与可观测性

性能优化从指标和用户场景开始。当前 Core Web Vitals 是 LCP、INP、CLS,良好阈值分别为 LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1,应在移动端和桌面端分别观察真实用户第 75 百分位。

从指标回到原因

指标常见原因诊断与动作
LCPTTFB、高优先级资源发现晚、图片过大、阻塞 CSS/JSNetwork waterfall、LCP breakdown、预加载/优先级、图片尺寸格式
INPLong Task、事件处理重、同步布局、渲染范围过大Performance、交互分解、拆任务、减少布局与组件更新
CLS图片无尺寸、字体替换、异步内容插入Layout Shift 归因、预留空间、稳定字体策略

实验室数据适合定位,真实用户数据反映设备、网络与地域分布。没有 RUM 时至少记录固定环境的基线和复现步骤。

错误采集不只监听 window.onerror

需要覆盖:JavaScript error、unhandledrejection、资源加载失败、接口失败、路由/版本信息、Web Worker 和关键业务错误。事件要采样、去重、脱敏、限流,并关联 release、session 和用户操作轨迹(遵守隐私边界)。

Source Map 可私有上传到监控平台,不必公开部署。发布产物的 commit/release 必须与 Source Map 对齐,否则堆栈映射会误导。

关键业务观测

技术指标之外,还应记录登录、搜索、加购、结算、活动预览/发布等步骤的成功率和耗时。这样才能区分“页面能打开”与“用户能完成任务”。

一个诊断闭环

  1. 告警按版本、浏览器和路由聚合,确认影响范围。
  2. 用真实错误上下文或 Performance trace 复现。
  3. 提出最小修复,并用相同数据量和交互做前后对比。
  4. 灰度发布,观察技术指标与业务指标。
  5. 把复现用例加入测试或监控,防止回归。

参考:web.dev Core Web VitalsVue 性能最佳实践