Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

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

  • 第一涂料-一个指标,可衡量用户导航到一个页面,当任何视觉变化发生的时间

  • 第一contentful涂料-甲度量措施当用户导航到网页,并且当有意义的内容的显示器,像的图像或文本之间的时间

  • domInteractive -一个指标,可衡量,当页面被认为是用户导航到一个页面,用户之间的互动时间

  • domContentLoadedEventEnd -甲度量措施当用户导航到一个页面之间的时间时,初始HTML文档被完全加载并解析

  • loadEventEnd -一个指标,可衡量用户导航到该页面,当当前文档的加载事件完成的时间

  • 首先输入延迟-一个指标,可衡量一个页面的用户交互,当浏览器能够回应称输入之间的时间

您可以查看从跟踪表的页面加载子选项卡,这是在性能仪表板的底部这些痕迹的数据(了解更多关于使用控制台后来此页)。

页面加载跟踪的定义

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

页面加载的痕迹帮助您跟踪应用程序的核心网络命脉,就像第一contentful漆。

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

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

第一次油漆

这个指标代表当用户导航到一个页面,并在任何的视觉变化发生的时间。

该指标以来的第一次漆信号给用户的页面开始加载有用。

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

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

第一个内容丰富的油漆

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

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

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

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

domInteractive

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

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

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

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

domContentLoadedEventEnd

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

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

  • 停止后最初的HTML文档被完全加载和解析( DOMContentLoaded ),但这并不意味着样式表,图片和子装载完毕。

加载事件结束

这个指标代表当用户导航到页面,在当前文档的加载事件完成的时间。

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

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

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

首次输入延迟

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

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

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

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

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

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

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

在仪表板中跟踪关键指标

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

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

要将指标添加到您的度量板,转到性能仪表板在火力地堡控制台,然后单击控制台选项卡。单击一个空的指标卡,然后选择一个现有的指标以添加到您的看板中。点击人口密集度卡更多的选择,喜欢更换或移除指标。

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

了解更多关于使用仪表板

查看跟踪及其数据

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

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

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

了解更多关于你的痕迹查看数据

下一步