前言
随着 Web 应用复杂度的提升（如 SPA、PWA、微前端架构的普及），用户对页面加载速度和交互流畅度的敏感度显著提高。数据显示：
- 页面加载时间每增加 1 秒，移动端转化率下降约 20%（Google 研究）
- 53% 的用户会放弃加载时间超过 3 秒的页面（Akamai 报告）
性能监控的目的是在前端应用中量化并收集性能指标，以便开发者更有方向性地进行性能优化。本文基于笔者对性能监控的调研成果撰写。
关键性能指标定义
FP (First Paint)
定义
首次渲染时间，浏览器首次将任何像素绘制到屏幕的时刻
业务意义
反映浏览器开始渲染的最早信号，白屏时间的结束点
阈值标准
无明确标准，建议 <=1s
FCP (First Contentful Paint)
定义
首次内容绘制，首次呈现文本/图片等非空白内容的时间
业务意义
用户留存关键指标，直接影响用户对页面的第一印象，影响跳出率
阈值标准
- 良好：<=1.8s
- 需改进：1.8-3s
- 差：>3s
FID（First Input Delay）
定义
用户首次与页面交互（点击等）到浏览器实际响应操作的时间差
业务意义
衡量页面可交互性，影响用户体验流畅度
阈值标准
- 良好：<=100ms
- 需改进：100-300ms
- 差：>300ms
CLS（Cumulative Layout Shift）
定义
页面生命周期内意外布局偏移的累计得分（如动态加载内容导致元素位移）
业务意义
防止用户误操作（如误点按钮），提升视觉稳定性
阈值标准
- 良好：≤0.1
- 需改进：0.1-0.25
- 差：>0.25
TTI（Time to Interactive）
定义
页面完全可交互的时间点（主线程空闲且能持续响应用户输入）
业务意义
反映用户何时能顺畅操作页面功能
阈值标准
- 良好：≤3.8s
- 需改进：3.8~7.3s
- 差：>7.3s
TBT（Total Blocking Time）
定义
FCP 到 TTI 之间主线程被长任务（>50ms）阻塞的总时间
业务意义
量化页面响应延迟，影响用户感知的流畅度
阈值标准
- 良好：<=300ms
- 需改进：300-600ms
- 差：>600ms
LCP (Largest Contentful Paint)
定义
最大内容渲染时间，测量页面可视区域内最大文本/图片元素完成渲染的时间点
业务意义
- 直接反映用户感知的主要内容加载速度
- LCP 每提升 0.1 秒，电商转化率可提升 0.6%
阈值标准
- 良好：≤2.5s
- 需改进：2.5~4s
- 差：>4s
技术实现方案
浏览器原生 API 支持
PerformanceTiming
关键时间戳
| 属性名 | 描述 |
|---|---|
navigationStart |
开始导航到页面的时间 |
responseStart |
接收到第一个字节的时间（TTFB） |
domContentLoadedEventEnd |
DOM 解析完成时间 |
loadEventEnd |
页面完全加载时间 |
核心计算公式
javascript
const timing = performance.timing; // DNS 查询耗时 const dns = timing.domainLookupEnd - timing.domainLookupStart; // TCP 连接耗时 const tcp = timing.connectEnd - timing.connectStart; // 首字节时间 const ttfb = timing.responseStart - timing.navigationStart;Performance Timeline API
核心方法
| 方法 | 用途 |
|---|---|
performance.mark() |
创建自定义时间标记 |
performance.measure() |
计算两个标记间的时间差 |
performance.getEntries() |
获取所有性能条目 |
PerformanceObserver API
最佳实践
javascript
// LCP 监控 const lcpObserver = new PerformanceObserver(list => { const entries = list.getEntries(); console.log('LCP:', entries[entries.length-1].startTime); }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); // CLS 监控 let cls = 0; const clsObserver = new PerformanceObserver(list => { list.getEntries().forEach(entry => { if (!entry.hadRecentInput) cls += entry.value; }); }); clsObserver.observe({ type: 'layout-shift', buffered: true });指标收集实现
基础指标收集
javascript
function getCoreMetrics() { const t = performance.timing; return { dns: t.domainLookupEnd - t.domainLookupStart, ttfb: t.responseStart - t.navigationStart, domReady: t.domContentLoadedEventEnd - t.navigationStart, fullLoad: t.loadEventEnd - t.navigationStart }; }Web Vitals 监控
LCP 优化示例
html
<link rel="preload" href="hero-image.jpg" as="image" importance="high"> <div data-lcp-target>主要内容</div>FID 监控
javascript
new PerformanceObserver(list => { const firstInput = list.getEntries()[0]; console.log('FID:', firstInput.processingStart - firstInput.startTime); }).observe({ type: 'first-input', buffered: true });总结
通过合理运用 Performance API 可以实现：
- 精准监控：毫秒级精度采集关键性能指标
- 问题诊断：快速定位资源加载、渲染阻塞等问题
- 趋势分析：长期追踪性能变化，验证优化效果