ไปที่คอนโซล

Web 性能监控使用入门

准备工作

请参阅将 Firebase 添加到您的 JavaScript 项目(如果您尚未参阅),以了解如何执行以下操作:

  • 创建 Firebase 项目

  • 在 FireBase 中注册您的 Web 应用

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

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

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

  • 从 CDN 添加(独立 SDK)- 如果性能监控是您应用中唯一的 Firebase 产品,则此选项会从 CDN 加载独立的轻量级 SDK。

  • 从 CDN 添加(标准 SDK)- 如果您在自己的应用中使用其他 Firebase 产品,则此选项会从 CDN 加载性能监控 SDK 以及其他 Firebase 库。

  • 从托管网址添加 - 如果您使用的是 Firebase 托管,则此选项为您在初始化 Firebase 时管理 Firebase 配置提供了便利。

  • 使用模块捆绑器添加 - 如果您使用捆绑器(例如 Browserify 或 webpack),则可以使用此选项在需要时导入各个模块。

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

从 CDN 添加

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

要从 CDN 添加性能监控 SDK,您有两种选择:

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

独立 SDK

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

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

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

  1. 将以下脚本添加到您的索引文件的文件头中。
  2. 确保添加应用的 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.1.0/firebase-performance-standalone.js'
  • firebaseConfig 是应用的 Firebase 配置对象

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

标准 SDK

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

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

  1. 要添加标准性能监控 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.1.0/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-performance.js"></script>
    <body>
    
  2. 在您的应用中初始化 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 配置。

  1. 要添加性能监控 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.1.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/6.1.0/firebase-performance.js"></script>
    </body>
    
  2. 在您的应用中初始化 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 JavaScript SDK 配置为部分导入,仅加载您需要的 Firebase 产品。如果您使用的是捆绑器(如 Browserify 或 webpack),则可以在需要时 import 各个 Firebase 产品。

  1. 通过运行以下命令,安装 firebase npm 软件包并将其保存到 package.json 文件:

    npm install --save firebase
  2. 要添加性能监控 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";
    
  3. 在您的应用中初始化 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 库。如需了解安装说明,请参阅该库的文档

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

第 3 步:检查性能监控是否正在记录数据

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

  2. 几秒钟后,在 Chrome 开发者工具的“网络”标签页中或 Firefox 的“网络监视器”中查找对 firebaselogging.googleapis.com 的网络调用。

    如果存在该网络调用,则说明浏览器正在向 Firebase 发送性能数据。

  3. 确认性能监控结果显示在 Firebase 控制台中。

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

第 4 步(可选)添加自定义跟踪记录和自定义指标

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

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

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

  1. 要启动和停止自定义跟踪记录,请使用类似于以下内容的几行代码封装要跟踪的代码:

    const trace = perf.trace('customTraceName');
    trace.start();
    
    // code that you want to trace
    
    trace.stop();
    
  2. 要添加自定义指标,请在每次发生事件时添加类似于以下内容的几行代码。例如,此自定义指标会统计应用中发生的与性能相关的事件。

    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 控制台中监控性能数据。

后续步骤