LogRocket 性能监控 #
什么是前端性能监控？ #
前端性能监控是测量、分析和优化 Web 应用性能的过程。良好的性能直接影响用户体验和业务指标。
text
┌─────────────────────────────────────────────────────────────┐
│ 性能对业务的影响 │
├─────────────────────────────────────────────────────────────┤
│ │
│ Google 研究数据： │
│ │
│ 页面加载时间增加 1 秒： │
│ ├── 转化率下降 7% │
│ ├── 页面浏览量下降 11% │
│ └── 客户满意度下降 16% │
│ │
│ BBC 研究： │
│ ├── 页面加载每增加 1 秒 │
│ └── 用户流失率增加 10% │
│ │
│ Amazon 研究： │
│ ├── 页面加载延迟 100ms │
│ └── 销售额下降 1% │
│ │
└─────────────────────────────────────────────────────────────┘
Core Web Vitals #
LogRocket 自动收集 Google 定义的 Core Web Vitals 指标。
指标概览 #
text
┌─────────────────────────────────────────────────────────────┐
│ Core Web Vitals │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ LCP (Largest Contentful Paint) │ │
│ │ 最大内容绘制时间 │ │
│ │ │ │
│ │ 测量：页面主要内容加载完成的时间 │ │
│ │ 目标：< 2.5 秒 │ │
│ │ 需要改进：> 4.0 秒 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ FID (First Input Delay) │ │
│ │ 首次输入延迟 │ │
│ │ │ │
│ │ 测量：用户首次交互到浏览器响应的时间 │ │
│ │ 目标：< 100 毫秒 │ │
│ │ 需要改进：> 300 毫秒 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ CLS (Cumulative Layout Shift) │ │
│ │ 累积布局偏移 │ │
│ │ │ │
│ │ 测量：页面视觉稳定性 │ │
│ │ 目标：< 0.1 │ │
│ │ 需要改进：> 0.25 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
LCP (Largest Contentful Paint) #
text
┌─────────────────────────────────────────────────────────────┐
│ LCP 详解 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 定义：视口内最大内容元素的渲染时间 │
│ │
│ 考虑的元素类型： │
│ - <img> 元素 │
│ - <svg> 内的 <image> │
│ - <video> 元素 │
│ - 通过 url() 加载的背景图片 │
│ - 块级元素（包含文本节点或内联级子元素） │
│ │
│ 影响 LCP 的因素： │
│ 1. 服务器响应时间 │
│ 2. JavaScript 和 CSS 阻塞 │
│ 3. 资源加载时间 │
│ 4. 客户端渲染 │
│ │
│ 优化建议： │
│ - 优化服务器响应时间 │
│ - 使用 CDN │
│ - 预加载关键资源 │
│ - 优化图片 │
│ - 减少阻塞资源 │
│ │
└─────────────────────────────────────────────────────────────┘
FID (First Input Delay) #
text
┌─────────────────────────────────────────────────────────────┐
│ FID 详解 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 定义：用户首次交互到浏览器开始处理事件的时间 │
│ │
│ 交互类型： │
│ - 点击 │
│ - 触摸 │
│ - 按键 │
│ │
│ 影响 FID 的因素： │
│ 1. 长任务阻塞主线程 │
│ 2. 大型 JavaScript 包 │
│ 3. JavaScript 执行时间 │
│ │
│ 优化建议： │
│ - 减少 JavaScript 体积 │
│ - 代码分割 │
│ - 使用 Web Worker │
│ - 延迟加载非关键 JS │
│ - 减少主线程工作 │
│ │
└─────────────────────────────────────────────────────────────┘
CLS (Cumulative Layout Shift) #
text
┌─────────────────────────────────────────────────────────────┐
│ CLS 详解 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 定义：页面整个生命周期内所有意外布局偏移的总和 │
│ │
│ 常见原因： │
│ 1. 无尺寸的图片 │
│ 2. 动态插入内容 │
│ 3. 网络字体加载 │
│ 4. 动画效果 │
│ │
│ 优化建议： │
│ - 为图片设置宽高 │
│ - 预留广告位空间 │
│ - 使用 font-display: optional │
│ - 避免在已有内容上方插入内容 │
│ - 使用 transform 动画 │
│ │
└─────────────────────────────────────────────────────────────┘
其他性能指标 #
页面加载指标 #
text
┌─────────────────────────────────────────────────────────────┐
│ 页面加载指标 │
├─────────────────────────────────────────────────────────────┤
│ │
│ FP (First Paint) │
│ 首次绘制 │
│ - 测量：首次像素渲染时间 │
│ - 目标：< 1 秒 │
│ │
│ FCP (First Contentful Paint) │
│ 首次内容绘制 │
│ - 测量：首次内容渲染时间 │
│ - 目标：< 1.8 秒 │
│ │
│ TTFB (Time to First Byte) │
│ 首字节时间 │
│ - 测量：从请求到收到首个字节的时间 │
│ - 目标：< 600ms │
│ │
│ DOMContentLoaded │
│ DOM 内容加载完成 │
│ - 测量：HTML 解析完成时间 │
│ │
│ Load │
│ 页面完全加载 │
│ - 测量：所有资源加载完成时间 │
│ │
└─────────────────────────────────────────────────────────────┘
交互性能指标 #
text
┌─────────────────────────────────────────────────────────────┐
│ 交互性能指标 │
├─────────────────────────────────────────────────────────────┤
│ │
│ TTI (Time to Interactive) │
│ 可交互时间 │
│ - 测量：页面完全可交互时间 │
│ - 目标：< 3.8 秒 │
│ │
│ TBT (Total Blocking Time) │
│ 总阻塞时间 │
│ - 测量：FCP 和 TTI 之间主线程阻塞时间 │
│ - 目标：< 200ms │
│ │
│ SI (Speed Index) │
│ 速度指数 │
│ - 测量：内容填充速度 │
│ - 目标：< 3.4 秒 │
│ │
└─────────────────────────────────────────────────────────────┘
LogRocket 性能仪表板 #
仪表板概览 #
text
┌─────────────────────────────────────────────────────────────┐
│ 性能仪表板 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Core Web Vitals 概览 │ │
│ │ │ │
│ │ LCP: 2.1s ✅ FID: 85ms ✅ CLS: 0.05 ✅ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 性能趋势图 │ │
│ │ │ │
│ │ [LCP 趋势] [FID 趋势] [CLS 趋势] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 页面性能详情 │ │
│ │ │ │
│ │ 页面 URL LCP FID CLS 会话数 │ │
│ │ /home 2.1s 85ms 0.05 1,234 │ │
│ │ /products 3.2s 120ms 0.08 567 │ │
│ │ /checkout 4.5s 200ms 0.12 89 │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
按页面分析 #
text
┌─────────────────────────────────────────────────────────────┐
│ 页面性能分析 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 功能： │
│ - 查看每个页面的性能指标 │
│ - 识别性能最差的页面 │
│ - 分析性能趋势 │
│ - 对比不同版本的性能 │
│ │
│ 使用场景： │
│ 1. 找出需要优化的页面 │
│ 2. 验证优化效果 │
│ 3. 监控性能回归 │
│ │
└─────────────────────────────────────────────────────────────┘
按用户分析 #
text
┌─────────────────────────────────────────────────────────────┐
│ 用户性能分析 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 分析维度： │
│ - 设备类型（桌面/移动） │
│ - 浏览器类型 │
│ - 地理位置 │
│ - 网络类型 │
│ │
│ 使用场景： │
│ 1. 识别特定设备/浏览器的性能问题 │
│ 2. 针对性优化 │
│ 3. 分析慢速网络下的表现 │
│ │
└─────────────────────────────────────────────────────────────┘
网络请求性能 #
请求监控 #
text
┌─────────────────────────────────────────────────────────────┐
│ 网络请求监控 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 监控内容： │
│ │
│ 1. 请求时间 │
│ - DNS 查询时间 │
│ - TCP 连接时间 │
│ - SSL 握手时间 │
│ - 请求发送时间 │
│ - 等待响应时间 (TTFB) │
│ - 内容下载时间 │
│ │
│ 2. 请求详情 │
│ - URL │
│ - 方法 (GET/POST/...) │
│ - 状态码 │
│ - 请求/响应大小 │
│ │
│ 3. 请求瀑布图 │
│ - 请求顺序 │
│ - 并行请求 │
│ - 阻塞关系 │
│ │
└─────────────────────────────────────────────────────────────┘
慢请求分析 #
javascript
// 在会话中查看慢请求
// LogRocket 自动标记响应时间超过阈值的请求
// 常见慢请求原因：
// 1. 后端处理慢
// 2. 数据库查询慢
// 3. 网络延迟
// 4. 大数据传输
// 5. 缺少缓存
API 性能分析 #
text
┌─────────────────────────────────────────────────────────────┐
│ API 性能分析 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 分析维度： │
│ │
│ 1. 响应时间分布 │
│ - P50: 50% 请求的响应时间 │
│ - P90: 90% 请求的响应时间 │
│ - P95: 95% 请求的响应时间 │
│ - P99: 99% 请求的响应时间 │
│ │
│ 2. 错误率 │
│ - 4xx 错误比例 │
│ - 5xx 错误比例 │
│ - 超时比例 │
│ │
│ 3. 请求量 │
│ - 每分钟请求数 │
│ - 峰值请求量 │
│ │
└─────────────────────────────────────────────────────────────┘
资源加载性能 #
资源瀑布图 #
text
┌─────────────────────────────────────────────────────────────┐
│ 资源瀑布图 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 资源类型： │
│ - HTML 文档 │
│ - CSS 样式表 │
│ - JavaScript 文件 │
│ - 图片 │
│ - 字体 │
│ - 其他资源 │
│ │
│ 分析要点： │
│ 1. 关键路径资源 │
│ - 阻塞渲染的资源 │
│ - 需要优先加载 │
│ │
│ 2. 资源大小 │
│ - 大文件需要优化 │
│ - 考虑压缩 │
│ │
│ 3. 加载顺序 │
│ - 是否有延迟加载 │
│ - 是否有预加载 │
│ │
└─────────────────────────────────────────────────────────────┘
资源优化建议 #
text
┌─────────────────────────────────────────────────────────────┐
│ 资源优化建议 │
├─────────────────────────────────────────────────────────────┤
│ │
│ JavaScript: │
│ - 代码分割 │
│ - Tree Shaking │
│ - 压缩混淆 │
│ - 延迟加载 │
│ │
│ CSS: │
│ - 提取关键 CSS │
│ - 压缩 CSS │
│ - 移除未使用的样式 │
│ │
│ 图片: │
│ - 使用 WebP 格式 │
│ - 图片压缩 │
│ - 响应式图片 │
│ - 懒加载 │
│ │
│ 字体: │
│ - font-display: swap │
│ - 子集化 │
│ - 预加载关键字体 │
│ │
└─────────────────────────────────────────────────────────────┘
性能告警 #
配置性能告警 #
javascript
// LogRocket 支持配置性能阈值告警
// 在 LogRocket 控制台配置
// 示例告警规则：
{
"name": "LCP 超过阈值",
"condition": {
"metric": "LCP",
"threshold": 4000,
"aggregation": "p95",
"timeWindow": "1h"
},
"actions": [
{
"type": "email",
"recipients": ["dev-team@example.com"]
},
{
"type": "slack",
"channel": "#performance-alerts"
}
]
}
告警类型 #
text
┌─────────────────────────────────────────────────────────────┐
│ 性能告警类型 │
├─────────────────────────────────────────────────────────────┤
│ │
│ Core Web Vitals 告警： │
│ - LCP 超过阈值 │
│ - FID 超过阈值 │
│ - CLS 超过阈值 │
│ │
│ 页面加载告警： │
│ - 页面加载时间过长 │
│ - 资源加载失败 │
│ │
│ API 性能告警： │
│ - API 响应时间过长 │
│ - API 错误率过高 │
│ │
│ 趋势告警： │
│ - 性能指标持续恶化 │
│ - 与上一周期对比 │
│ │
└─────────────────────────────────────────────────────────────┘
性能优化实战 #
1. LCP 优化案例 #
text
┌─────────────────────────────────────────────────────────────┐
│ LCP 优化案例 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 问题：首页 LCP = 4.5s │
│ │
│ 分析： │
│ 1. 查看会话回放 │
│ 2. 分析资源瀑布图 │
│ 3. 发现英雄图片过大（5MB） │
│ │
│ 解决方案： │
│ 1. 图片压缩到 500KB │
│ 2. 使用 WebP 格式 │
│ 3. 添加图片预加载 │
│ │
│ 结果：LCP 降低到 2.1s │
│ │
└─────────────────────────────────────────────────────────────┘
2. FID 优化案例 #
text
┌─────────────────────────────────────────────────────────────┐
│ FID 优化案例 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 问题：搜索页面 FID = 350ms │
│ │
│ 分析： │
│ 1. 查看会话回放 │
│ 2. 发现大型 JS 包阻塞主线程 │
│ 3. 首次交互时 JS 正在执行 │
│ │
│ 解决方案： │
│ 1. 代码分割，延迟加载非关键 JS │
│ 2. 使用 Web Worker 处理复杂计算 │
│ 3. 优化第三方脚本 │
│ │
│ 结果：FID 降低到 80ms │
│ │
└─────────────────────────────────────────────────────────────┘
3. CLS 优化案例 #
text
┌─────────────────────────────────────────────────────────────┐
│ CLS 优化案例 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 问题：产品列表页 CLS = 0.35 │
│ │
│ 分析： │
│ 1. 查看会话回放 │
│ 2. 发现图片加载导致布局偏移 │
│ 3. 广告动态插入导致偏移 │
│ │
│ 解决方案： │
│ 1. 为图片设置固定宽高 │
│ 2. 预留广告位空间 │
│ 3. 使用 aspect-ratio CSS 属性 │
│ │
│ 结果：CLS 降低到 0.05 │
│ │
└─────────────────────────────────────────────────────────────┘
性能监控最佳实践 #
1. 建立性能基线 #
text
┌─────────────────────────────────────────────────────────────┐
│ 建立性能基线 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 步骤： │
│ │
│ 1. 收集当前性能数据 │
│ - 至少收集 2 周数据 │
│ - 记录 P50/P90/P95/P99 │
│ │
│ 2. 设定性能目标 │
│ - 基于 Core Web Vitals 标准 │
│ - 考虑业务需求 │
│ │
│ 3. 建立监控仪表板 │
│ - 关键指标可视化 │
│ - 趋势分析 │
│ │
│ 4. 配置告警 │
│ - 超过阈值时通知 │
│ - 性能回归时通知 │
│ │
└─────────────────────────────────────────────────────────────┘
2. 持续监控 #
text
┌─────────────────────────────────────────────────────────────┐
│ 持续监控 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 日常监控： │
│ - 每日查看性能仪表板 │
│ - 关注告警通知 │
│ - 分析异常会话 │
│ │
│ 发布监控： │
│ - 发布前记录性能基线 │
│ - 发布后对比性能变化 │
│ - 发现回归及时修复 │
│ │
│ 定期分析： │
│ - 每周性能报告 │
│ - 每月深度分析 │
│ - 季度优化计划 │
│ │
└─────────────────────────────────────────────────────────────┘
3. 性能预算 #
javascript
// 配置性能预算
const performanceBudget = {
lcp: 2500,
fid: 100,
cls: 0.1,
fcp: 1800,
tti: 3800,
bundleSize: {
javascript: 300 * 1024,
css: 50 * 1024,
images: 500 * 1024
}
};
// 在 CI/CD 中检查性能预算
// 如果超过预算，构建失败
下一步 #
现在你已经掌握了性能监控的使用方法，接下来学习 错误追踪 了解如何高效追踪和分析前端错误！
最后更新：2026-03-29