欢迎参加我们将于 2022 年 10 月 18 日举办的 Firebase 峰会(线上线下同时进行),了解 Firebase 如何帮助您加快应用开发速度、满怀信心地发布应用并在之后需要时轻松地扩大应用规模。立即报名

了解页面加载性能数据(网络应用)

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

性能监控使用跟踪来收集有关应用程序中受监控进程的数据。跟踪是一种报告,其中包含在您的应用程序中的两个时间点之间捕获的数据。

对于 Web 应用程序,性能监控会自动收集应用程序每个页面的跟踪,称为页面加载跟踪。每个页面加载跟踪都会收集以下默认指标:

  • 首次绘制— 衡量用户导航到页面与发生任何视觉变化之间的时间的指标

  • 首次内容绘制——衡量用户导航到页面与显示有意义的内容(如图像或文本)之间的时间的指标

  • domInteractive — 衡量从用户导航到页面到页面被认为对用户具有交互性之间的时间的度量

  • domContentLoadedEventEnd — 衡量用户导航到页面与初始 HTML 文档完全加载和解析之间的时间的指标

  • loadEventEnd — 衡量用户导航到页面和当前文档的加载事件完成之间的时间的指标

  • 首次输入延迟— 衡量用户与页面交互与浏览器能够响应该输入之间的时间的指标

您可以在跟踪表的页面加载子选项卡中查看来自这些跟踪的数据,该表位于性能仪表板的底部(在本页后面了解有关使用控制台的更多信息)。

页面加载跟踪的定义

此跟踪测量有关应用程序中的页面如何加载的几个指标,特别是到达常见加载点所需的时间,例如响应式应用程序。

页面加载跟踪可帮助您跟踪应用的核心网络生命力,例如第一次内容绘制。

为页面加载跟踪收集的指标

这些跟踪是开箱即用的跟踪,因此您无法向它们添加自定义指标或自定义属性。

第一次油漆

该指标衡量用户导航到页面与发生任何视觉变化之间的时间。

这个指标很有用,因为第一次绘制会向您的用户发出页面开始加载的信号。

  • 当用户导航到页面时开始。

  • 任何视觉变化发生时停止,包括背景颜色变化或标题加载。

第一次满足的油漆

该指标衡量用户导航到页面与显示有意义的内容(如图像或文本)之间的时间。

该指标有助于深入了解用户在多长时间内看到应用的任何实际内容,而不仅仅是新的背景颜色或标题。

  • 当用户导航到页面时开始。

  • 在浏览器从 DOM 呈现第一个内容后立即停止,包括任何文本、图像(包括背景图像)、非白色画布或 SVG。

dom交互式

此度量标准衡量用户导航到页面与页面被视为对用户交互的时间之间的时间。

该指标有助于深入了解用户在多长时间内可以实际与应用中的元素(例如按钮和超链接)进行交互,而不仅仅是在屏幕上看到它们。请注意,这并不意味着浏览器会响应交互(有关此指标,请参阅第一个输入延迟跟踪)。

  • 当用户导航到页面时开始。

  • 在用户代理将当前 HTML 文档的就绪状态设置为“交互式”之前立即停止。

domContentLoadedEventEnd

该指标测量用户导航到页面与初始 HTML 文档完全加载和解析之间的时间。

  • 当用户导航到页面时开始。

  • 在初始 HTML 文档完全加载和解析 ( DOMContentLoaded ) 后立即停止,但这并不意味着样式表、图像和子框架已完成加载。

加载事件结束

该指标测量用户导航到页面和当前文档的加载事件完成之间的时间。

该指标有助于深入了解加载所有内容(包括样式表和图像)所需的时间。

  • 当用户导航到页面时开始。

  • 在当前 HTML 文档的加载事件完成后立即停止。

第一次输入延迟

该指标衡量用户与页面交互与浏览器能够响应该输入之间的时间。

这个指标很有用,因为响应用户交互的浏览器给了用户他们对应用响应能力的第一印象。

  • 当用户第一次与页面上的元素交互时开始,例如单击按钮或超链接。

  • 在浏览器能够响应输入后立即停止,这意味着浏览器不忙于加载或解析您的内容。

请注意,要测量第一个输入延迟指标,您需要为此指标添加 polyfill 库。有关安装说明,请参阅库的文档

跟踪、查看和过滤性能数据

要查看实时性能数据,请确保您的应用使用与实时数据处理兼容的性能监控 SDK 版本。了解有关实时性能数据的更多信息

跟踪仪表板中的关键指标

要了解关键指标的趋势,请将它们添加到性能仪表板顶部的指标板上。您可以通过查看每周更改来快速识别回归,或者验证您的代码中最近的更改是否正在提高性能。

Firebase 性能监控仪表板中的指标板图像

要将指标添加到您的指标板,请执行以下步骤:

  1. 转到 Firebase 控制台中的性能信息中心
  2. 单击一个空的指标卡,然后选择一个现有指标添加到您的板上。
  3. 单击填充的指标卡上的以获取更多选项,例如替换或删除指标。

指标板以图形形式和数字百分比变化显示随时间收集的指标数据。

了解有关使用仪表板的更多信息。

查看痕迹及其数据

要查看您的跟踪,请转到 Firebase 控制台中的性能仪表板,向下滚动到跟踪表,然后单击相应的子选项卡。该表显示了每个跟踪的一些顶级指标,您甚至可以按特定指标的百分比变化对列表进行排序。

性能监控在 Firebase 控制台中提供了一个故障排除页面,该页面突出显示了指标更改,从而可以轻松快速地解决并最大限度地减少性能问题对您的应用和用户的影响。当您了解潜在的性能问题时,您可以使用故障排除页面,例如,在以下情况下:

  • 您在仪表板上选择相关指标,您会注意到一个很大的增量。
  • 在跟踪表中,您排序以在顶部显示最大的增量,并且您会看到显着的百分比变化。
  • 您会收到一封电子邮件警报,通知您存在性能问题。

您可以通过以下方式访问故障排除页面:

  • 在指标仪表板上,单击查看指标详细信息按钮。
  • 在任何度量卡上,选择 => 查看详细信息。故障排除页面显示有关您选择的指标的信息。
  • 在跟踪表中,单击跟踪名称或与该跟踪关联的行中的任何度量值。
  • 在电子邮件警报中,单击立即调查

当您单击跟踪表中的跟踪名称时,您可以深入了解感兴趣的指标。点击过滤按钮,按属性过滤数据,例如:

按属性过滤的 Firebase 性能监控数据的图像
  • 页面 URL过滤以查看站点特定页面的数据
  • 有效连接类型过滤以了解 3g 连接如何影响您的应用
  • 国家/地区过滤以确保您的数据库位置不会影响特定区域

了解有关查看跟踪数据的更多信息。

下一步

  • 了解有关使用属性检查性能数据的更多信息。

  • 详细了解如何在 Firebase 控制台中跟踪性能问题

  • 为降低应用程序性能的页面加载设置警报。例如,如果特定页面的第一个输入延迟超过您设置的阈值,您可以为您的团队配置电子邮件警报。