核心功能
性能指标监控
自动收集并分析关键性能指标（如 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
问题定位与分类
通过可视化工具和分析功能，将性能问题分类并精准定位根因。
常见问题分类
问题定位工具
- 性能瀑布图
- 错误分析
性能瀑布图展示页面加载的完整时间线，帮助您识别瓶颈。
关键时间点：
- 导航开始：用户发起页面请求的时间
- DNS 查询：域名解析耗时
- TCP 连接：建立服务器连接的耗时
- 首字节时间（TTFB）：接收服务器响应的第一个字节的耗时
- DOM 完成：页面 DOM 结构加载完成的时间
- 关键路径：识别影响页面渲染的关键资源
- 阻塞资源：发现阻塞渲染的脚本或样式表
- 加载顺序：优化资源加载优先级
- 资源大小：检查是否存在体积过大的资源
优化建议
定位问题根因后，您可以根据分析结果实施优化：页面加载缓慢
压缩资源、优化 critical CSS、启用 CDN
交互响应延迟
减少 JavaScript 执行时间、优化事件监听器
资源加载异常
检查 CDN 配置、确保资源路径正确
JavaScript 错误
修复代码逻辑、添加错误边界、优化内存使用
下一步
指标上报
了解指标收集与上报机制
性能分析
深入分析性能数据
诊断优化
学习问题诊断与优化方法