Flashduty RUM 性能指标收集与上报

概述

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

Web Vitals 指标概览

Flashduty RUM 支持以下核心 Web Vitals 指标：

最大内容绘制 (LCP): 衡量页面主要内容的加载性能

交互到下一帧延迟 (INP): 衡量整体交互响应性能

累计布局偏移 (CLS): 衡量视觉稳定性

首次内容绘制 (FCP): 衡量首次内容渲染时间

除核心指标外，还支持其他辅助指标：

首次输入延迟 (FID): 衡量页面交互性能

首次字节时间 (TTFB): 衡量服务器响应速度

这些指标会在用户访问页面时自动收集，并通过 SDK 上报到 Flashduty 平台，您可以在分析看板中查看详细的性能数据。

指标计算方法

1. 最大内容绘制（LCP）

计算: 从页面开始加载（navigationStart）到最大可见内容元素（如图片、文本块）渲染完成的时间。

用例: 监控主页或关键页面内容加载速度，识别资源加载瓶颈。

2. 首次内容绘制 (FCP)

计算: 测量从用户第一次导航到页面到页面内容的任何部分在屏幕上呈现的时间。

用例: 用于测量感知加载速度，有助于向用户保证某些事情正在发生。

3. 交互到下一帧延迟（INP）

计算: 测量所有用户交互（点击、轻触、键盘输入）到下一帧渲染的延迟时间。

用例: 评估页面整体交互响应性能，优化高延迟交互场景。

4. 累计布局偏移（CLS）

计算: 统计所有意外布局偏移的分数（偏移距离 × 影响区域）。

用例: 识别动态内容或广告导致的页面跳动问题。

5. 首次输入延迟（FID）

计算: 从用户第一次交互开始到浏览器处理事件的时间差。

用例: 优化交互密集型页面（如表单、导航菜单）的响应速度。

自定义性能监控

1. 组件级性能测量

使用 customVital API 监控特定组件或交互的性能，适用于：

关键组件渲染时间。

用户交互响应时间。

业务流程耗时。

示例：测量组件渲染

示例：直接报告耗时

2. 性能时间点记录

使用 addTiming API 记录关键时间点，适用于：

关键元素加载（如首屏图片）。

用户首次交互（如首次滚动）。

业务节点时间戳。

示例：记录首次滚动

示例：异步场景

注意事项

1. 命名规范

指标名称避免空格、特殊字符。

使用描述性命名（如 login_form_render）。

保持命名一致性。

2. SPA 场景处理

路由变更时，计时以当前 RUM view 的开始时间为基准。

需要重置某些计时器。

注意页面切换时的指标连续性。

3. 性能影响控制

控制自定义指标数量。

避免频繁计时。

合理设置采样率。

常见问题

1. 页面加载时间异常

检查慢加载资源（图片、脚本）。

排查第三方脚本阻塞。

分析长时间运行的 JavaScript。

2. 活动状态判定不准确

确认是否存在频繁的后台请求。

检查长连接或流式请求的处理。

使用 excludedActivityUrls 排除干扰。

3. 自定义指标问题

验证指标名称是否符合规范。

确保计时器正确启停。

检查异步场景的时间戳准确性。

下一步

性能分析

诊断优化

指标上报

概述#

Web Vitals 指标概览#

指标计算方法#

1. 最大内容绘制（LCP）#

2. 首次内容绘制 (FCP)#

3. 交互到下一帧延迟（INP）#

4. 累计布局偏移（CLS）#

5. 首次输入延迟（FID）#

自定义性能监控#

1. 组件级性能测量#

示例：测量组件渲染#

示例：直接报告耗时#

2. 性能时间点记录#

示例：记录首次滚动#

示例：异步场景#

注意事项#

1. 命名规范#

2. SPA 场景处理#

3. 性能影响控制#

常见问题#

1. 页面加载时间异常#

2. 活动状态判定不准确#

3. 自定义指标问题#

下一步#

概述