性能与可观测性
性能优化从指标和用户场景开始。当前 Core Web Vitals 是 LCP、INP、CLS,良好阈值分别为 LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1,应在移动端和桌面端分别观察真实用户第 75 百分位。
从指标回到原因
| 指标 | 常见原因 | 诊断与动作 |
|---|---|---|
| LCP | TTFB、高优先级资源发现晚、图片过大、阻塞 CSS/JS | Network waterfall、LCP breakdown、预加载/优先级、图片尺寸格式 |
| INP | Long Task、事件处理重、同步布局、渲染范围过大 | Performance、交互分解、拆任务、减少布局与组件更新 |
| CLS | 图片无尺寸、字体替换、异步内容插入 | Layout Shift 归因、预留空间、稳定字体策略 |
实验室数据适合定位,真实用户数据反映设备、网络与地域分布。没有 RUM 时至少记录固定环境的基线和复现步骤。
错误采集不只监听 window.onerror
需要覆盖:JavaScript error、unhandledrejection、资源加载失败、接口失败、路由/版本信息、Web Worker 和关键业务错误。事件要采样、去重、脱敏、限流,并关联 release、session 和用户操作轨迹(遵守隐私边界)。
Source Map 可私有上传到监控平台,不必公开部署。发布产物的 commit/release 必须与 Source Map 对齐,否则堆栈映射会误导。
关键业务观测
技术指标之外,还应记录登录、搜索、加购、结算、活动预览/发布等步骤的成功率和耗时。这样才能区分“页面能打开”与“用户能完成任务”。
一个诊断闭环
- 告警按版本、浏览器和路由聚合,确认影响范围。
- 用真实错误上下文或 Performance trace 复现。
- 提出最小修复,并用相同数据量和交互做前后对比。
- 灰度发布,观察技术指标与业务指标。
- 把复现用例加入测试或监控,防止回归。