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

开始使用 Web 性能监控

在你开始之前

如果您还没有，请访问将 Firebase 添加到您的 JavaScript 项目以了解如何：

  • 创建一个 Firebase 项目

  • 向 Firebase 注册您的网络应用

请注意，当您将 Firebase 添加到您的应用时，您可能会完成本页后面介绍的一些步骤（例如，添加 SDK 和初始化 Firebase）。

第 1 步：添加并初始化性能监控

  1. 如果您还没有，请安装 Firebase JS SDK 并初始化 Firebase 。

  2. 添加性能监控 JS SDK 并初始化性能监控：

Web version 9

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

Web version 8

import firebase from "firebase/app";
import "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

第 2 步：添加第一个输入延迟 polyfill 库

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

性能监控不需要添加此 polyfill 库来报告其他 Web 应用程序指标。

第 3 步：为初始数据显示生成性能事件

当您成功将 SDK 添加到您的应用时，Firebase 开始处理这些事件。如果您仍在本地开发，请与您的应用交互以生成用于初始数据收集和处理的事件。

  1. 在本地环境中服务和查看您的 Web 应用程序。

  2. 通过为您的站点加载子页面、与您的应用程序交互和/或触发网络请求来生成事件。确保在页面加载后保持浏览器选项卡打开至少 10 秒。

  3. 转到 Firebase 控制台的性能信息中心。您应该会在几分钟内看到您的初始数据显示。

    如果您没有看到初始数据的显示，请查看故障排除提示。

第 4 步：（可选）查看性能事件的日志消息

  1. 打开浏览器的开发人员工具（例如， Chrome 开发工具的网络选项卡或Firefox 的网络监视器）。

  2. 在浏览器中刷新您的 Web 应用程序。

  3. 检查您的日志消息中是否有任何错误消息。

  4. 几秒钟后，在浏览器的开发人员工具中查找对firebaselogging.googleapis.com的网络调用。该网络调用的存在表明浏览器正在向 Firebase 发送性能数据。

如果您的应用没有记录性能事件，请查看故障排除提示。

第 5 步：（可选）为特定代码添加自定义监控

要监控与应用中特定代码相关的性能数据，您可以检测自定义代码跟踪。

使用自定义代码跟踪，您可以测量应用程序完成特定任务或一组任务需要多长时间，例如加载一组图像或查询您的数据库。自定义代码跟踪的默认指标是其持续时间，但您也可以添加自定义指标，例如缓存命中和内存警告。

在您的代码中，您可以使用性能监控 SDK 提供的 API 定义自定义代码跟踪的开始和结束（并添加任何所需的自定义指标）。

访问为特定代码添加监控以了解有关这些功能以及如何将它们添加到您的应用程序的更多信息。

第 6 步：部署您的应用程序，然后查看结果

验证性能监控后，您可以将应用程序的更新版本部署给您的用户。

您可以在 Firebase 控制台的性能信息中心监控性能数据。

下一步