Google 致力于为黑人社区推动种族平等。查看具体举措

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

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

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

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

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

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

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

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

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

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

页面加载跟踪的定义

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

页面加载跟踪可帮助您跟踪应用的核心网络重要信息,例如首次内容绘制。

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

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

第一次油漆

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

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

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

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

第一个内容丰富的油漆

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

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

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

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

domInteractive

该指标衡量用户导航到页面与页面被视为用户交互之间的时间。

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

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

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

domContentLoadedEventEnd

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

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

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

加载事件结束

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

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

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

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

首次输入延迟

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

该指标很有用,因为响应用户交互的浏览器可以让您的用户对您的应用程序的响应能力有第一印象。

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

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

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

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

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

在仪表板中跟踪关键指标

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

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

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

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

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

查看跟踪及其数据

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

如果单击跟踪表中的跟踪名称,则可以单击各个屏幕以浏览跟踪并深入了解感兴趣的指标。在大多数页面上,您可以使用过滤器按钮(屏幕左上角)按属性过滤数据,例如:

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

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

下一步