欢迎参加我们将于 2022 年 10 月 18 日举办的 Firebase 峰会（线上线下同时进行），了解 Firebase 如何帮助您加快应用开发速度、满怀信心地发布应用并在之后需要时轻松地扩大应用规模。立即报名

Performance Monitoring 使用入门 (Web)

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

准备工作

如果您尚未开始使用本产品，请参阅将 Firebase 添加到您的 JavaScript 项目，以了解如何执行以下操作：

  • 创建 Firebase 项目

  • 在 Firebase 中注册您的 Web 应用

请注意，将 Firebase 添加到应用时，您可以完成下文介绍的一些步骤（例如，添加 SDK 和初始化 Firebase）。

第 1 步：添加并初始化 Performance Monitoring

  1. 如果您尚未安装 Firebase JS SDK 并初始化 Firebase，请先安装并进行初始化。

  2. 添加 Performance Monitoring JS SDK 并初始化 Performance Monitoring：

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 步：添加 First Input Delay polyfill 库

如需测量 First Input Delay 指标，您需要添加此 polyfill 库。如需了解安装说明，请参阅该库的文档。

Performance Monitoring 无需添加此 polyfill 库即可报告其他 Web 应用指标。

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

成功将 SDK 添加到应用后，Firebase 会开始处理事件。如果您仍在本地进行开发，请与您的应用交互以生成事件，从而让 SDK 收集和处理初始数据。

  1. 在本地环境中托管和查看您的 Web 应用。

  2. 可通过以下方法生成事件：为您的网站加载子页面、与您的应用进行交互，和/或触发网络请求。网页加载后，请确保让浏览器标签页保持打开状态至少 10 秒。

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

    如果您没有看到初始数据，请查看问题排查提示。

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

  1. 打开浏览器的开发者工具（例如，Chrome DevTools 的“网络”标签页或 Firefox 的网络监视器）。

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

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

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

如果您的应用未记录性能事件，请查看问题排查提示。

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

如需监控与应用中特定代码相关联的性能数据，您可以对代码进行插桩处理，从而添加自定义代码跟踪记录。

借助自定义代码跟踪记录，您可以衡量应用完成一项或一组任务（例如加载一组图像或查询数据库）所需的时间。自定义代码跟踪记录的默认指标是其时长，但您也可以添加自定义指标，例如缓存命中数和内存警告。

在代码中，您可以使用 Performance Monitoring SDK 提供的 API 指定跟踪记录的开始和结束（以及添加任何所需的自定义指标）。

请访问为特定代码添加监控功能，详细了解这些功能以及如何将其添加到您的应用中。

第 6 步：部署应用，然后查看结果

验证 Performance Monitoring 之后，您就可以将新版应用部署给用户了。

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

后续步骤