> ## 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 自定义加载时间指标）排查页面加载缓慢的原因，这些指标可以从用户的角度评估完整页面的加载时间。

为了进行更深入的分析，优化页面提供了按用户人口统计（例如浏览器、地区和应用版本）的核心网页指标的详细拆分。您可以利用这些信息跟踪性能趋势，了解受影响最多的用户群体，精准优化。

## 诊断优化流程

您可导航至优化页面，该页面位于性能监控菜单下，选取待洞察的指标即可。您也可以通过在分析看板中查看对应的性能数据跳转至此功能。

<Steps>
  <Step title="指标选择">
    选择页面和指标后，便可开始做性能数据洞察：

    1. 点击指标卡片选择要洞察的指标（目前支持 LCP、FCP、INP、CLS）
    2. 在「显示筛选细分」中选择一个组
    3. 在不同的百分位数处评估指标（例如 p75 表示第 75 个百分位数值）
  </Step>

  <Step title="数据查看">
    您可通过调整数据聚合方式或修改筛选条件，查看该指标在不同条件下的数据表现情况，从而推进诊断优化工作。

    <Frame>
      <img src="https://docs-cdn.flashcat.cloud/images/png/65dd3ca92d67ae9175955502d91552dc.png" alt="数据查看" />
    </Frame>
  </Step>

  <Step title="问题诊断">
    在问题诊断部分，您可以看到用户在页面上遇到的可能影响指标性能的资源和错误。

    <Frame>
      <img src="https://docs-cdn.flashcat.cloud/imges/png/279908df6509c39e433bd24a39df1ff2.png" alt="问题诊断" />
    </Frame>

    <Tip>
      例如，对于最大内容绘制（LCP），您可以查看在触发 LCP 之前加载的资源。由于 LCP 是最大元素在页面上加载所需时间的指标，您可以从资源加载和解决错误两个方面进行问题诊断。
    </Tip>
  </Step>

  <Step title="查看事件样本">
    如果在资源分析阶段无法更准确地定位到关键信息，您可在事件样本区块中选取合适的事件样本进行更详细的上下文分析。

    <Frame>
      <img src="https://docs-cdn.flashcat.cloud/imges/png/04c160de32f11fd695e0a30cfca05af8.png" alt="事件样本" />
    </Frame>
  </Step>
</Steps>

## 优化方向

<Tabs>
  <Tab title="优化资源加载">
    资源加载分析面板展示当前视图下所有资源的详细加载信息，帮助您识别性能瓶颈。

    您可以通过「全部资源」和「阻塞资源」两个选项卡切换查看范围：

    * **全部资源**：展示视图中加载的所有资源
    * **阻塞资源**：仅展示标记为 `blocking` 的渲染阻塞资源，这些资源会延迟页面的首次渲染

    资源列表包含以下字段：

    | 字段                | 说明                                             |
    | ----------------- | ---------------------------------------------- |
    | URL GROUP         | 资源的 URL 路径分组                                   |
    | TYPE              | 资源类型（如 JS、CSS、Image 等）                         |
    | AVG CLIENT SIZE   | 平均客户端资源大小                                      |
    | AVG TRANSFER SIZE | 平均传输大小（如传输大小明显小于客户端大小，说明部分采样命中了缓存）             |
    | AVG START TIME    | 平均开始加载时间                                       |
    | AVG DURATION      | 平均加载耗时，并以色条可视化展示 DNS 解析、连接建立、首字节等待和下载四个阶段的耗时占比 |

    <Tip>
      将鼠标悬停在耗时色条上，可查看各阶段的具体耗时数值，帮助您判断是网络连接、服务器响应还是资源大小导致的加载缓慢。
    </Tip>
  </Tab>

  <Tab title="解决错误">
    * 关注可能导致问题的重复错误，这些异常也会影响页面性能
  </Tab>

  <Tab title="瀑布图分析">
    * 瀑布图显示了在捕获指标时事件的时间线
    * 向下滚动可查看页面活动其余部分的上下文
    * 使用左上角的下拉菜单选择另一个示例事件
    * 单击展开瀑布中的任何事件以查看侧边面板
    * 通过筛选事件类型和各筛选项来选取合适的事件集合进行问题分析
  </Tab>
</Tabs>