> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flashcat.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# 核心概念

> 了解 Flashduty RUM 性能监控的核心概念、关键性能指标及计算方法，优化用户体验。

Flashduty RUM（真实用户监控）提供强大的工具，帮助您快速诊断和优化前端性能问题。通过性能监控模块可快速识别性能瓶颈、定位根因并实施优化措施，确保为用户提供流畅的体验。

## 核心功能

<CardGroup cols={2}>
  <Card title="性能指标监控" icon="gauge-high">
    自动收集并分析关键性能指标（如 FCP、LCP、CLS、FID 等），提供全面的性能数据视图
  </Card>

  <Card title="资源加载分析" icon="download">
    监控和分析静态资源（如 JS、CSS、图片等）的加载性能，识别加载缓慢的资源
  </Card>

  <Card title="API 性能追踪" icon="server">
    追踪和分析后端 API 调用的性能表现，包括响应时间、成功率等指标
  </Card>

  <Card title="性能问题诊断" icon="stethoscope">
    提供全面的性能问题诊断能力，包括性能瓶颈分析、资源加载优化建议等
  </Card>
</CardGroup>

## 价值与优势

| 优势         | 描述                        |
| ---------- | ------------------------- |
| **提升用户体验** | 通过优化网站性能，减少页面加载时间，提高用户满意度 |
| **提高转化率**  | 改善网站性能，提升用户留存率和转化率        |
| **数据驱动决策** | 基于性能数据做出优化决策，持续改进产品性能     |

## 使用场景

<AccordionGroup>
  <Accordion title="性能优化">
    识别并解决网站性能瓶颈，提升整体性能表现。
  </Accordion>

  <Accordion title="资源优化">
    分析并优化静态资源加载，提高页面加载速度。
  </Accordion>

  <Accordion title="API 优化">
    监控和优化后端 API 性能，提升接口响应速度。
  </Accordion>

  <Accordion title="用户体验分析">
    通过性能数据了解用户使用体验，针对性地改进产品。
  </Accordion>
</AccordionGroup>

## 性能监控流程

Flashduty RUM 的性能优化分为三个关键阶段：

<Steps>
  <Step title="问题识别">
    快速发现性能问题的触发点是诊断的第一步。Flashduty RUM 提供以下方式帮助您识别问题：

    * **数据分析**：通过「应用管理 - 数据分析」模块，查看核心性能指标的数据趋势
    * **用户反馈**：通过用户报告（如页面加载缓慢或交互卡顿）发现潜在问题
    * **异常检测**：观察异常趋势，如资源加载失败率升高或 API 响应时间延长

    <Frame>
      <img src="https://docs-cdn.flashcat.cloud/imges/png/27d0dcc2a58ea7832f2c7ebb5684e418.png" alt="问题识别" />
    </Frame>

    **初步评估：**

    * **影响范围**：确定问题影响的用户群体（例如特定地区、设备或浏览器）
    * **严重程度**：评估问题对用户体验的直接影响
    * **业务影响**：分析问题对关键业务指标（如转化率或用户留存）的影响
  </Step>

  <Step title="数据收集">
    Flashduty RUM 提供丰富的性能数据和上下文信息：

    **核心性能数据：**

    * **页面加载指标**：包括 LCP、FCP、TTI
    * **资源加载时间**：分析图片、脚本、CSS 等资源的加载耗时
    * **JavaScript 性能**：监控脚本执行时间和阻塞渲染的脚本
    * **网络请求**：记录 API 请求的延迟、成功率和错误率

    **上下文信息：**

    * **用户环境**：浏览器类型、设备型号、操作系统和网络状况
    * **错误日志**：捕获 JavaScript 错误、网络错误和资源加载失败的详细信息
    * **系统资源**：分析 CPU 使用率、内存占用和 DOM 操作频率
  </Step>

  <Step title="问题定位与分类">
    通过可视化工具和分析功能，将性能问题分类并精准定位根因。
  </Step>
</Steps>

### 常见问题分类

| 问题类型              | 典型表现         | 可能原因                             | 关键指标          |
| ----------------- | ------------ | -------------------------------- | ------------- |
| **页面加载缓慢**        | 白屏时间长、首屏渲染慢  | 资源体积过大、阻塞渲染的脚本或 CSS、服务器响应慢       | LCP, FCP, TTI |
| **交互响应延迟**        | 点击无反应、操作卡顿   | JavaScript 执行时间长、事件监听过多、DOM 操作频繁 | FID, INP, TBT |
| **资源加载异常**        | 图片/脚本加载失败、超时 | CDN 配置错误、网络不稳定、资源路径错误            | 资源加载时间, 失败率   |
| **JavaScript 错误** | 功能失效、控制台报错   | 代码逻辑错误、浏览器兼容性问题、内存泄漏             | 错误率, 内存使用     |
| **网络连接问题**        | 请求超时、连接中断    | API 响应慢、网络质量差、跨域配置错误             | 请求延迟, 连接成功率   |

## 问题定位工具

<Tabs>
  <Tab title="性能瀑布图">
    性能瀑布图展示页面加载的完整时间线，帮助您识别瓶颈。

    <Frame>
      <img src="https://docs-cdn.flashcat.cloud/imges/png/49c2e13200b1bfd62434c13010fd87f3.png" alt="性能瀑布图" />
    </Frame>

    **关键时间点：**

    * **导航开始**：用户发起页面请求的时间
    * **DNS 查询**：域名解析耗时
    * **TCP 连接**：建立服务器连接的耗时
    * **首字节时间（TTFB）**：接收服务器响应的第一个字节的耗时
    * **DOM 完成**：页面 DOM 结构加载完成的时间

    **资源加载分析：**

    * **关键路径**：识别影响页面渲染的关键资源
    * **阻塞资源**：发现阻塞渲染的脚本或样式表
    * **加载顺序**：优化资源加载优先级
    * **资源大小**：检查是否存在体积过大的资源
  </Tab>

  <Tab title="错误分析">
    Flashduty RUM 捕获并分类前端错误，提供详细的上下文信息。

    **错误类型：**

    * JavaScript 运行时错误（如未捕获的异常或语法错误）
    * 网络请求错误（如 API 超时或 4xx/5xx 错误）
    * 资源加载错误（如图片或脚本加载失败）
    * 框架相关错误（如 React 或 Vue 的组件渲染错误）

    **错误上下文：**

    * **错误堆栈**：提供详细的调用栈信息
    * **用户操作序列**：重现触发错误的操作路径
    * **环境信息**：包括浏览器、设备和网络状态
    * **相关性能数据**：关联错误与性能指标的变化
  </Tab>
</Tabs>

## 优化建议

定位问题根因后，您可以根据分析结果实施优化：

<CardGroup cols={2}>
  <Card title="页面加载缓慢" icon="hourglass">
    压缩资源、优化 critical CSS、启用 CDN
  </Card>

  <Card title="交互响应延迟" icon="hand-pointer">
    减少 JavaScript 执行时间、优化事件监听器
  </Card>

  <Card title="资源加载异常" icon="image">
    检查 CDN 配置、确保资源路径正确
  </Card>

  <Card title="JavaScript 错误" icon="bug">
    修复代码逻辑、添加错误边界、优化内存使用
  </Card>
</CardGroup>

## 下一步

<CardGroup cols={3}>
  <Card title="指标上报" icon="upload" href="./metrics-reporting">
    了解指标收集与上报机制
  </Card>

  <Card title="性能分析" icon="chart-line" href="./performance-analysis">
    深入分析性能数据
  </Card>

  <Card title="诊断优化" icon="wrench" href="./diagnosis-optimization">
    学习问题诊断与优化方法
  </Card>
</CardGroup>