跳转到主要内容
Flashduty RUM 支持收集和上报 Web Vitals 相关的性能指标，帮助您全面监控和优化网站性能。通过这些指标，您可以了解用户在访问网站时的实际体验，并针对性地进行优化。

​
Web Vitals 指标概览

Flashduty RUM 支持以下 核心 Web Vitals 指标：
指标全称说明
LCP最大内容绘制衡量页面主要内容的加载性能
INP交互到下一帧延迟衡量整体交互响应性能
CLS累计布局偏移衡量视觉稳定性
FCP首次内容绘制衡量首次内容渲染时间
FID首次输入延迟衡量页面交互性能（辅助指标）
TTFB首次字节时间衡量服务器响应速度（辅助指标）
这些指标会在用户访问页面时自动收集，并通过 SDK 上报到 Flashduty 平台，您可以在分析看板中查看详细的性能数据。
对于在后台打开的页面（例如，在新标签页或无焦点的窗口中），不会收集到 INP 和 LCP 的数据。

​
指标计算方法

计算方法： 从页面开始加载（navigationStart）到最大可见内容元素（如图片、文本块）渲染完成的时间。用例： 监控主页或关键页面内容加载速度，识别资源加载瓶颈。
计算方法： 测量从用户第一次导航到页面到页面内容的任何部分在屏幕上呈现的时间。用例： 用于测量感知加载速度，有助于向用户保证某些事情正在发生。
计算方法： 测量所有用户交互（点击、轻触、键盘输入）到下一帧渲染的延迟时间。用例： 评估页面整体交互响应性能，优化高延迟交互场景。
计算方法： 统计所有意外布局偏移的分数（偏移距离 × 影响区域）。用例： 识别动态内容或广告导致的页面跳动问题。
计算方法： 从用户第一次交互开始到浏览器处理事件的时间差。用例： 优化交互密集型页面（如表单、导航菜单）的响应速度。

​
监控单页应用 (SPA)

对于单页应用程序，RUM 浏览器 SDK 通过 loading_type 属性区分 initial_load 和 route_change 两种导航类型。
如果网页上的某个交互操作导致 URL 发生变化，但页面并未完全刷新，RUM SDK 会使用 loading_type:route_change 启动一个新的 view。RUM 使用 History API 来跟踪 URL 的变化。
对于 SPA 应用，如需监控路由切换后的性能，建议使用自定义性能监控功能来测量特定组件或交互的性能指标。

​
自定义性能监控

​
组件级性能测量

使用 customVital API 监控特定组件或交互的性能，适用于：
  • 关键组件渲染时间
  • 用户交互响应时间
  • 业务流程耗时
// 开始计时
const ref = window.FC_RUM.startDurationVital("componentRendering", {
  description: "login-form",
  context: { clientId: "xxx", componentVersion: "1.0.0" },
});

// 结束计时
window.FC_RUM.stopDurationVital(ref);

​
性能时间点记录

使用 addTiming API 记录关键时间点，适用于：
  • 关键元素加载（如首屏图片）
  • 用户首次交互（如首次滚动）
  • 业务节点时间戳
document.addEventListener("scroll", function handler() {
  document.removeEventListener("scroll", handler);
  window.FC_RUM.addTiming("first_scroll");
});

​
注意事项

命名规范

  • 指标名称避免空格、特殊字符
  • 使用描述性命名（如 login_form_render）
  • 保持命名一致性

性能影响控制

  • 控制自定义指标数量
  • 避免频繁计时
  • 合理设置采样率

​
常见问题

  • 检查慢加载资源（图片、脚本）
  • 排查第三方脚本阻塞
  • 分析长时间运行的 JavaScript
  • 确认是否存在频繁的后台请求
  • 检查长连接或流式请求的处理
  • 使用 excludedActivityUrls 排除干扰
  • 验证指标名称是否符合规范
  • 确保计时器正确启停
  • 检查异步场景的时间戳准确性
原因说明
后台页面页面在新标签页或无焦点窗口中打开，导致 INP 和 LCP 无法收集
SPA 路由切换在 loading_type:route_change 时，核心 Web Vitals 指标不会重新收集
引入方式页面在 SDK 完全初始化前就已加载完成
页面生命周期页面在指标收集完成前就被关闭或导航离开
浏览器兼容性旧版本浏览器不支持某些 Web Vitals API
页面无内容页面没有可测量的内容元素（如空白页面）

​
下一步

性能分析

深入分析性能数据

诊断优化

学习问题诊断与优化方法