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

准备工作

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

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

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

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

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

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

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

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

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

从 CDN 添加

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

如需从 CDN 添加 Firebase 性能监控 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.onload = function() {firebase.initializeApp(fbc).performance();};
})(performance_standalone, firebaseConfig);

其中

“performance_standalone”是 'https://www.gstatic.com/firebasejs/6.4.0/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.onload = function() {
       firebase.initializeApp(firebaseConfigObject).performance();
   };
})(performance_standalone, firebaseConfig);

其中

“performance_standalone”是 'https://www.gstatic.com/firebasejs/6.4.0/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/6.4.0/firebase-app.js"></script>

  <!-- Add the standard Performance Monitoring library -->
  <script src="https://www.gstatic.com/firebasejs/6.4.0/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/6.4.0/firebase-app.js"></script>

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

在您的应用中初始化 Firebase 和 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 npm 软件包并将其保存到 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 性能监控是否正在记录数据

在浏览器中刷新您的 Web 应用。
几秒钟后，在 Chrome 开发者工具的“网络”标签页或 Firefox 的网络监视器中查找对 firebaselogging.googleapis.com 的网络调用。

如果存在该网络调用，表示浏览器正在向 Firebase 发送性能数据。
确认 Firebase 性能监控结果显示在 Firebase 控制台中。

结果通常在 12 小时内显示。

第 4 步：（可选）添加自定义跟踪记录和自定义指标

自定义跟踪记录是与您应用中某些代码相关联的性能数据的报告。如需详细了解自定义跟踪记录，请参阅 Firebase 性能监控概览。

您的应用中可以有多项自定义跟踪记录，并且可以同时运行。每项自定义跟踪记录都可以设置一个或多个指标来统计应用中与性能相关的事件，这些指标与创建它们的跟踪记录相关联。

请注意，自定义跟踪记录和指标的名称必须满足以下要求：没有前导空格或尾随空格，没有前导下划线 (_) 字符，最大长度为 32 个字符。

如需启动和停止自定义跟踪记录，请使用类似于以下内容的几行代码封装要跟踪的代码：
```
const trace = perf.trace('customTraceName');
trace.start();

// code that you want to trace

trace.stop();
```

如需添加自定义指标，请在每次发生事件时添加类似于以下内容的几行代码。例如，此自定义指标对应用中发生的与性能相关的事件进行计数。

async function getInventory(inventoryIds) {
  const trace = perf.trace('inventoryRetrieval');

  // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
  trace.incrementMetric('numberOfIds', inventoryIds.length);

  // Measures the time it takes to request inventory based on the amount of inventory
  trace.start();
  const inventoryData = await retrieveInventory(inventoryIds);
  trace.stop();

  return inventoryData;
}

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

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

您可以在 Firebase 控制台中监控性能数据。

后续步骤

参阅将 Firebase Performance Monitoring 用于 Web Codelab，获得实际上手经验。
详细了解自动跟踪记录。
详细了解如何监控自定义属性。