获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

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

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

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

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

  • first contentful paint — 衡量用户导航到页面和显示有意义的内容(如图像或文本)之间的时间的指标

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

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

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

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

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

页面加载跟踪的定义

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

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

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

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

第一次油漆

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

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

  • 当用户导航到页面时启动。

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

第一个内容丰富的油漆

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

此指标有助于深入了解您的用户多久能看到您应用的任何实际内容,而不仅仅是新的背景颜色或标题。

  • 当用户导航到页面时启动。

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

dom交互

该指标衡量用户导航到页面与页面被认为对用户具有交互性之间的时间。

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

  • 当用户导航到页面时启动。

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

domContentLoadedEventEnd

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

  • 当用户导航到页面时启动。

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

加载事件结束

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

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

  • 当用户导航到页面时启动。

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

首次输入延迟

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

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

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

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

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

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

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

在仪表板中跟踪关键指标

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

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

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

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

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

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

查看痕迹及其数据

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

Performance Monitoring 在 Firebase 控制台中提供了一个故障排除页面,其中突出显示了指标变化,使您可以轻松快速地解决性能问题并将其对您的应用和用户的影响降至最低。当您了解潜在的性能问题时,例如在以下情况下,您可以使用故障排除页面:

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

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

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

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

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

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

下一步

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

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

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