Firebase 性能监控使用入门 (Web)

准备工作

请参阅将 Firebase 添加到您的 JavaScript 项目（如果您尚未参阅），以了解如何执行以下操作：

创建 Firebase 项目
在 FireBase 中注册您的 Web 应用

如需在 Web 应用中使用 Firebase 性能监控，您必须在 Firebase 控制台中将您的应用添加为 Firebase Web 应用。

如果您已经在自己现有的 Web 应用中使用 Firebase 产品，并且希望开始使用性能监控 SDK，则必须更新 Firebase 配置对象以包含您的 appID。

请注意，将应用添加到 Firebase 项目时，您还可以完成以下指南中的一些步骤（例如，添加 Firebase SDK 并初始化 Firebase）。

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

请使用以下选项之一在您的应用中添加 Firebase 性能监控 SDK 并初始化 Firebase（如果您尚未执行这些操作）。请考虑以下方面，帮助您选择合适的选项（如需了解详细信息，请参阅相应标签页）：

从 CDN 添加（独立 SDK）- 如果 Firebase 性能监控是您应用中唯一的 Firebase 产品，则此选项会从 CDN 加载一个单独的轻量级 SDK。
从 CDN 添加（标准 SDK）- 如果您在自己的应用中使用其他 Firebase 产品，则此选项会从 CDN 加载性能监控 SDK 以及其他 Firebase 库。
从托管网址添加 - 如果您使用 Firebase 托管，则此选项为您在初始化 Firebase 时管理 Firebase 配置提供了便利。
使用模块捆绑器添加 - 如果您使用捆绑器（例如 Browserify 或 webpack），则可以使用此选项在需要时导入各个模块。

添加该 SDK 后，Firebase 会立即开始监控自动跟踪记录和自动 HTTP/S 网络请求。

从 CDN 添加

您可以将 Firebase JavaScript SDK 配置为部分导入，只加载您需要的 Firebase 库。Firebase 将各 Firebase JavaScript SDK 库存储在我们的全球 CDN（内容分发网络）上。

如需从 CDN 添加性能监控 SDK，您有两种选择：

独立 SDK - Firebase 性能监控是您在自己的应用中使用的唯一 Firebase 产品。
标准 SDK - 您在自己的应用中将 Firebase 性能监控与其他 Firebase 产品搭配使用。

独立 SDK

如果 Firebase 性能监控是您的应用中唯一的 Firebase 产品，并且您希望实现以下目的，请使用独立 Firebase 性能监控 SDK（以及下文推荐的文件头脚本）：

缩小您的 SDK 软件包的大小
将该 SDK 的初始化操作延迟到网页加载之后

如需将独立的 Firebase 性能监控 SDK 添加到应用，并将其初始化操作延迟到网页加载之后，请执行以下操作：

将以下脚本添加到您的索引文件的文件头中。
确保添加应用的 Firebase 项目配置对象。

(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);
window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

其中

performance_standalone 是 'https://www.gstatic.com/firebasejs/7.19.1/firebase-performance-standalone.js'
firebaseConfig 是应用的 Firebase 配置对象

上面的脚本会异步加载独立 SDK，然后在窗口的 onload 事件触发后初始化 Firebase。此策略可以减少该 SDK 可能对网页加载指标造成的影响，因为浏览器在您初始化该 SDK 时已经报告了其加载指标。

了解独立的 Firebase 性能监控 SDK 和文件头脚本

此独立 SDK 已针对大小进行了优化，经 Gzip 压缩后，大小约为 10KB。它具有 Firebase 性能监控的所有功能和最小的 Firebase 核心 SDK 功能集。

Firebase 性能监控使用旧版浏览器不具备的 fetch 和 Promise API。这些 API 的 polyfill 包含在标准 Firebase 性能监控 JS SDK 中，但为了减小大小，独立 SDK 中省略了这些 polyfill。

Firebase 性能监控 SDK 部分依赖于 Resource Timing API 从浏览器获取网页加载指标。

以下代码段分解了包含并延迟该 SDK 初始化操作的文件头脚本：

(function(sdkSource, firebaseConfigObject) {
   function load(f, c) {
       // Creates a script tag to load the standalone SDK
       var sdkScript = document.createElement('script');

       // Sets it to an async script so that it doesn't interfere with page load
       sdkScript.async = 1;

       // Sets the source of the script
       sdkScript.src = f;

       // Inserts the script into the head of the page
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(sdkScript, s);
   }

   // Calls the load method
   load(sdkSource);

   // Initializes the SDK only when the onload method is called
   window.addEventListener('load', function() {
       firebase.initializeApp(firebaseConfigObject).performance();
   });
})(performance_standalone, firebaseConfig);

其中

performance_standalone 是 'https://www.gstatic.com/firebasejs/7.19.1/firebase-performance-standalone.js'
firebaseConfig 是应用的 Firebase 配置对象

标准 SDK

如果您在自己的应用中使用其他 Firebase 产品（例如身份验证或 Cloud Firestore），请添加标准 Firebase 性能监控 SDK。

请注意，此 SDK 要求您添加单独的标准 Firebase 核心 SDK，并在单独的脚本中初始化 Firebase 和 Firebase 性能监控。

如需添加标准 Firebase 性能监控 SDK，请在使用任何 Firebase 服务之前，将以下脚本添加到 <body> 标记的底部：

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-app.js"></script>

  <!-- Add the standard Performance Monitoring library -->
  <script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-performance.js"></script>
<body>

在您的应用中初始化 Firebase 和 Firebase 性能监控：

<body>
<!-- Previously loaded Firebase SDKs -->

<script>
  // TODO: Replace the following with your app's Firebase project configuration
  var firebaseConfig = {
    // ...
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

  // Initialize Performance Monitoring and get a reference to the service
  var perf = firebase.performance();
</script>
</body>

从托管网址添加

使用 Firebase 托管时，您可以将应用配置为从预留的网址动态加载 Firebase JavaScript SDK 库。请详细了解如何通过预留的托管网址添加 SDK。

通过此设置选项，在您将应用部署到 Firebase 后，应用会从您部署到的 Firebase 项目中自动拉取 Firebase 配置对象。您可以将同一代码库部署到多个 Firebase 项目，但不必跟踪用于 firebase.initializeApp() 的 Firebase 配置。

如需添加 Firebase 性能监控 SDK，请在使用任何 Firebase 服务之前，将以下脚本添加到 <body> 标记的底部：

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/7.19.1/firebase-app.js"></script>

  <!-- Add the Performance Monitoring library -->
  <script src="/__/firebase/7.19.1/firebase-performance.js"></script>
</body>

在您的应用中初始化 Firebase 和性能监控（使用预留的托管网址时无需添加 Firebase 配置对象）：

<body>
  <!-- Previously loaded Firebase SDKs -->

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>

  <!-- Initialize Performance Monitoring and get a reference to the service -->
  <script>
    var perf = firebase.performance();
    // ...
  </script>
</body>

使用预留的托管网址时，在本地测试您的 Firebase 性能监控集成

为了在本地测试您的 Firebase 性能监控集成，firebase serve 目前不支持通过 /__/firebase/init.js 网址为 Firebase 性能监控初始化 Firebase。因此，请按如下方式添加 Firebase 配置对象并初始化 Firebase：

  <body>
    <!-- Previously loaded Firebase SDKs (via Hosting URLs) -->

    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };

      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);

      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
  </body>

使用模块捆绑器添加

您可将 Firebase JavaScript SDK 配置为部分导入，仅加载您需要的 Firebase 产品。如果您使用的是捆绑器（如 Browserify 或 webpack），则可以在需要时 import 单个 Firebase 产品。

运行以下命令，安装 firebase 软件包并将其保存到 package.json 文件：
```
npm install --save firebase
```

如需添加 Firebase 性能监控 SDK，请 import Firebase 模块：

// Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";

// Add the Performance Monitoring library
import "firebase/performance";

在您的应用中初始化 Firebase 和 Firebase 性能监控：

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

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

第 2 步：添加首次输入延迟 polyfill 库

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

Firebase 性能监控无需添加 polyfill 库即可报告其他 Web 应用指标。

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

Firebase 可以通过接收来自您的应用的事件信息（如应用交互）来检测该 SDK 是否已成功添加到您的应用。如果您仍在本地进行开发，请与您的应用交互，以生成 SDK 检测事件以及初始数据收集和处理事件。

在本地环境中提供和查看您的 Web 应用。
生成事件的方法包括：为您的网站加载子页面、与您的应用进行交互，以及触发网络请求。网页加载后，请确保浏览器标签页至少打开 10 秒。
转到 Firebase 控制台的“性能”部分，查看 Firebase 是否已检测到 SDK。

如果您没有看到“检测到了 SDK”的消息，请查看问题排查提示。
Performance Monitoring 会先处理性能事件数据，然后再将其显示在“性能”信息中心中。您应该会在看到 SDK 检测消息后的 24 小时内看到您的初始数据。

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

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

打开浏览器的开发者工具（例如，Chrome DevTools 的“网络”标签页或 Firefox 的网络监视器）。
在浏览器中刷新您的 Web 应用。
检查您的日志消息中有无任何错误消息。
几秒钟后，在浏览器的开发者工具中查找对 firebaselogging.googleapis.com 的网络调用。如果存在该网络调用，表示浏览器正在向 Firebase 发送性能数据。

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

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

您可以创建自定义跟踪记录来监控与应用中的特定代码相关联的性能数据。

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

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

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

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

验证 Firebase 性能监控之后，您就可以将更新版应用部署给用户了。

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

后续步骤

参阅将 Firebase 性能监控用于 Web Codelab，获得实际上手经验。
详细了解以下内容：