Перейти к консоли

网页应用的自动时长跟踪记录

“跟踪记录”是在应用的两个时间点之间捕获的性能数据的报告。对于网页应用,性能监控会自动提供“网页加载”的跟踪记录。

“网页加载”跟踪记录细分为以下默认指标:

  • “首次渲染”指标 - 衡量用户导航到页面的时间点与发生任何视觉变化的时间点之间的时长

  • “首次内容渲染”指标 - 衡量用户导航到页面的时间点与系统显示有意义的内容(如图片或文本)的时间点之间的时长

  • domInteractive 指标 - 衡量用户导航到页面的时间点与页面被认为可以与用户进行交互的时间点之间的时长

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

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

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

网页加载指标的定义

首次渲染

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

因为首次渲染会向用户发出页面开始加载的信号,所以此指标很有用。

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

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

首次内容渲染

该指标用于测量用户导航到页面的时间点和系统显示有意义的内容(如图片或文本)的时间点之间的时间。

此指标可让您了解用户多快可以看到应用的任何实际内容(而不仅仅是新的背景颜色或标题)。

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

  • 浏览器显示来自 DOM 的第一批内容后立即停止,内容包括任何文本、图片(含背景图片)、非白画布或 SVG。

domInteractive

该指标用于测量用户导航到页面的时间点和页面被认为可以与用户进行交互的时间点之间的时间。

此指标可让您了解用户多快可以与应用中的元素(例如按钮和超链接)实际交互(而不仅仅是在屏幕上看到这些元素)。请注意,这并不意味着浏览器将响应该交互(如需了解此指标,请参阅“首次输入延迟”跟踪记录)。

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

  • 用户代理马上要将当前 HTML 文档的就绪性设置为“可交互”之前停止。

domContentLoadedEventEnd

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

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

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

loadEventEnd

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

此指标可让您了解加载所有内容(包括样式表和图片)所需的时间。

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

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

首次输入延迟

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

因为浏览器对用户交互的响应决定了用户对应用的响应速度的第一印象,所以此指标很有用。

  • 用户首次与页面上的元素交互(例如点击按钮或超链接)时开始。

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

请注意要测量首次输入延迟指标,您需要为此指标添加 polyfill 库。如需了解安装说明,请参阅该库的文档

在控制台中监控自动页面加载时长跟踪记录

  1. 在 Firebase 控制台中,转到 Performance(性能)信息中心

  2. 点击“基于设备”标签,然后您可以执行以下操作:

    • 查看已收集的所有页面加载跟踪记录(以及已添加的任何自定义跟踪记录)的数据的简明报告。

    • 点击特定跟踪记录以查看更详细的跟踪记录数据。

    • 使用信息中心左上角的过滤条件 add 按钮,按属性对数据执行基本过滤。

  3. 点击特定跟踪记录,控制台即会在指标卡片上显示所收集数据的简要信息。

    • 使用信息中心右上角的选项可以查看按“汇总”或“随时间变化情况”显示的数据。

    • 使用信息中心左上角的过滤条件 add 按钮,按属性对数据执行基本过滤。

  4. 对于任何指标,点击查看更多即可查看有关已收集数据的详细信息并使用更丰富的分析功能。例如,您可以按属性过滤和细分数据。