Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

Web 性能監控入門

在你開始之前

如果您還沒有,請訪問將 Firebase 添加到您的 JavaScript 項目以了解如何:

  • 創建 Firebase 項目

  • 向 Firebase 註冊您的網絡應用

請注意,當您將 Firebase 添加到您的應用時,您可能還需要完成本頁面中描述的一些步驟(例如,添加 Firebase SDK 和初始化 Firebase )。

第 1 步:添加性能監控並初始化 Firebase

如果您尚未添加性能監控 SDK,請使用以下選項之一在您的應用中初始化 Firebase。考慮以下內容以幫助您在選項中進行選擇(有關更多詳細信息,請參閱各個選項卡):

  • 來自 CDN (獨立 SDK) ——如果 Performance Monitoring 是您應用中​​唯一的 Firebase 產品,則此選項會從 CDN 加載一個更輕量級的 SDK。

  • 來自 CDN (標準 SDK) ——如果您在應用中使用其他 Firebase 產品,則此選項會加載性能監控 SDK 以及來自 CDN 的其他 Firebase 庫。

  • 來自託管 URL — 如果您使用 Firebase 託管,則此選項可為您在初始化 Firebase 時管理 Firebase 配置提供便利。

  • 使用模塊捆綁器——如果您使用捆綁器(如 Browserify 或 webpack),請在需要時使用此選項導入單個模塊。

添加 Performance Monitoring SDK 後,Firebase 會自動開始收集應用程序頁面加載HTTP/S 網絡請求的數據

來自 CDN

您可以配置 Firebase JavaScript SDK 的部分導入,並僅加載您需要的 Firebase 庫。 Firebase 將 Firebase JavaScript SDK 的每個庫存儲在我們的全球 CDN(內容交付網絡)上。

要包含 CDN 中的性能監控 SDK,您有兩個選擇:

  • 獨立 SDK — 性能監控是您在應用中使用的唯一 Firebase 產品。
  • 標準 SDK — 您在應用中將性能監控與其他 Firebase 產品一起使用。

獨立 SDK

如果 Performance Monitoring 是您應用中​​唯一的 Firebase 產品,並且您有興趣,請使用獨立的 Performance Monitoring 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.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

在哪裡,

  • performance_standalone'https://www.gstatic.com/firebasejs/8.6.8/firebase-performance-standalone.js'
  • firebaseConfig是您應用的Firebase 配置對象

上述腳本異步加載獨立 SDK,然後在窗口的onload事件觸發初始化 Firebase。這種策略減少了 SDK 對頁面加載指標的影響,因為瀏覽器在您初始化 SDK 時已經報告了它的加載指標。

標準SDK

如果您使用其他 Firebase 產品(例如您的應用中的身份驗證或 Cloud Firestore),請包含標準的性能監控 SDK。

請注意,此 SDK 要求您包含單獨的標準 Firebase 核心 SDK,並在單獨的腳本中初始化 Firebase 和性能監控。

  1. 要包含標準性能監控 SDK,請將以下腳本添加到<body>標記的底部,但在您使用任何 Firebase 服務之前:

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

從託管 URL

使用 Firebase 託管時,您可以將應用配置為從保留的網址動態加載 Firebase JavaScript SDK 庫。了解有關通過保留的託管 URL 添加 SDK 的更多信息。

使用此設置選項,在您部署到 Firebase 後,您的應用會自動從您部署到的 Firebase 項目中提取 Firebase 配置對象。您可以將相同的代碼庫部署到多個 Firebase 項目,但您不必跟踪用於firebase.initializeApp()的 Firebase 配置。

  1. 要包含性能監控 SDK,請將以下腳本添加到<body>標記的底部,但在您使用任何 Firebase 服務之前:

    <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/8.6.8/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.6.8/firebase-performance.js"></script>
    </body>
    
  2. 在您的應用中初始化 Firebase 和性能監控(使用保留的託管 URL 時無需包含您的 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 firebase from "firebase/app";
    
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // 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();
    

第二步:添加第一個輸入延遲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 控制台的性能儀表板中監控性能數據。

下一步