核心功能
性能指标监控
自动收集并分析关键性能指标（如 FCP、LCP、CLS、FID 等），提供全面的性能数据视图
资源加载分析
监控和分析静态资源（如 JS、CSS、图片等）的加载性能，识别加载缓慢的资源
API 性能追踪
追踪和分析后端 API 调用的性能表现，包括响应时间、成功率等指标
性能问题诊断
提供全面的性能问题诊断能力，包括性能瓶颈分析、资源加载优化建议等
价值与优势
| 优势 | 描述 |
|---|---|
| 提升用户体验 | 通过优化网站性能，减少页面加载时间，提高用户满意度 |
| 提高转化率 | 改善网站性能，提升用户留存率和转化率 |
| 数据驱动决策 | 基于性能数据做出优化决策，持续改进产品性能 |
使用场景
性能优化
性能优化
识别并解决网站性能瓶颈，提升整体性能表现。
资源优化
资源优化
分析并优化静态资源加载，提高页面加载速度。
API 优化
API 优化
监控和优化后端 API 性能，提升接口响应速度。
用户体验分析
用户体验分析
通过性能数据了解用户使用体验，针对性地改进产品。
性能监控流程
Flashduty RUM 的性能优化分为三个关键阶段：1
问题识别
快速发现性能问题的触发点是诊断的第一步。Flashduty RUM 提供以下方式帮助您识别问题：
初步评估：
- 数据分析：通过「应用管理 - 数据分析」模块，查看核心性能指标的数据趋势
- 用户反馈：通过用户报告（如页面加载缓慢或交互卡顿）发现潜在问题
- 异常检测：观察异常趋势，如资源加载失败率升高或 API 响应时间延长
- 影响范围：确定问题影响的用户群体（例如特定地区、设备或浏览器）
- 严重程度：评估问题对用户体验的直接影响
- 业务影响：分析问题对关键业务指标（如转化率或用户留存）的影响
2
数据收集
Flashduty RUM 提供丰富的性能数据和上下文信息：核心性能数据：
- 页面加载指标：包括 LCP、FCP、TTI
- 资源加载时间：分析图片、脚本、CSS 等资源的加载耗时
- JavaScript 性能：监控脚本执行时间和阻塞渲染的脚本
- 网络请求：记录 API 请求的延迟、成功率和错误率
- 用户环境：浏览器类型、设备型号、操作系统和网络状况
- 错误日志：捕获 JavaScript 错误、网络错误和资源加载失败的详细信息
- 系统资源：分析 CPU 使用率、内存占用和 DOM 操作频率
3
问题定位与分类
通过可视化工具和分析功能，将性能问题分类并精准定位根因。
常见问题分类
| 问题类型 | 典型表现 | 可能原因 | 关键指标 |
|---|---|---|---|
| 页面加载缓慢 | 白屏时间长、首屏渲染慢 | 资源体积过大、阻塞渲染的脚本或 CSS、服务器响应慢 | LCP, FCP, TTI |
| 交互响应延迟 | 点击无反应、操作卡顿 | JavaScript 执行时间长、事件监听过多、DOM 操作频繁 | FID, INP, TBT |
| 资源加载异常 | 图片/脚本加载失败、超时 | CDN 配置错误、网络不稳定、资源路径错误 | 资源加载时间, 失败率 |
| JavaScript 错误 | 功能失效、控制台报错 | 代码逻辑错误、浏览器兼容性问题、内存泄漏 | 错误率, 内存使用 |
| 网络连接问题 | 请求超时、连接中断 | API 响应慢、网络质量差、跨域配置错误 | 请求延迟, 连接成功率 |
问题定位工具
- 性能瀑布图
- 错误分析
性能瀑布图展示页面加载的完整时间线，帮助您识别瓶颈。
关键时间点：
- 导航开始：用户发起页面请求的时间
- DNS 查询：域名解析耗时
- TCP 连接：建立服务器连接的耗时
- 首字节时间（TTFB）：接收服务器响应的第一个字节的耗时
- DOM 完成：页面 DOM 结构加载完成的时间
- 关键路径：识别影响页面渲染的关键资源
- 阻塞资源：发现阻塞渲染的脚本或样式表
- 加载顺序：优化资源加载优先级
- 资源大小：检查是否存在体积过大的资源
优化建议
定位问题根因后，您可以根据分析结果实施优化：页面加载缓慢
压缩资源、优化 critical CSS、启用 CDN
交互响应延迟
减少 JavaScript 执行时间、优化事件监听器
资源加载异常
检查 CDN 配置、确保资源路径正确
JavaScript 错误
修复代码逻辑、添加错误边界、优化内存使用