Web 性能監控入門

在你開始之前

如果你還沒有準備好,請訪問火力地堡添加到您的JavaScript項目如何學習:

  • 創建 Firebase 項目

  • 向 Firebase 註冊您的網絡應用

請注意,當您添加火力地堡到您的應用程序,你也可以完成一些步驟在此頁面上描述的(例如,增加火力地堡SDK和初始化火力地堡)。

第1步:添加性能監控和初始化火力地堡

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

  • CDN(獨立SDK) -如果性能監控是唯一的火力地堡的產品在你的應用程序,此選項負載從CDN單,重量更輕的SDK。

  • CDN(標準SDK) -如果使用其他火力地堡的產品在你的應用程序,此選項的負載性能與來自CDN其他火力地堡庫一起監測SDK。

  • 從主辦網址-如果你正在使用火力地堡主機,此選項提供了初始化火力地堡時管理你的火力地堡配置的便利性。

  • 使用模塊捆紮機-如果使用捆綁(如Browserify或的WebPack),使用此選項時,你需要他們導入單個模塊。

您添加性能監視SDK後,火力地堡自動啟動為您的應用收集數據的頁面加載HTTP / S的網絡請求

來自 CDN

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

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

  • 獨立SDK -性能監控是唯一的火力地堡的產品,你在你的應用程序中使用。
  • 標準SDK -您使用性能與其他火力地堡的產品在你的應用程序一起監控。

獨立 SDK

如果 Performance Monitoring 是您應用中​​唯一的 Firebase 產品,並且您有興趣,請使用獨立的 Performance Monitoring SDK(以及下面推薦的標頭腳本):

  • 減少您的 SDK 包大小
  • 將 SDK 的初始化延遲到您的頁面加載之後

要在您的應用程序中包含獨立的性能監控 SDK 並將其初始化延遲到您的頁面加載後:

  1. 將以下腳本添加到索引文件的標題中。
  2. 確保為您應用的火力地堡項目配置對象
(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.8.1/firebase-performance-standalone.js'
  • firebaseConfig是您的應用程序的火力地堡配置對象

上面的腳本異步加載,然後獨立SDK窗口的初始化火力地堡onload事件觸發。這種策略減少了SDK可能對影響頁面加載的指標,因為瀏覽器已經報告了其負荷指標,當你初始化SDK。

標準SDK

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

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

  1. 包括標準的性能監控SDK,添加以下腳本到您的底部<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/8.8.1/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.8.1/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.initializeApp()

  1. 包括性能監控SDK,添加以下腳本到您的底部<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/8.8.1/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.8.1/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 ,當你需要他們個人火力地堡產品。

  1. 安裝firebase NPM包,並保存到您package.json運行文件:

    npm install --save firebase
  2. 包括性能監控SDK, import了火力地堡模塊:

    // 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();
    

第2步:添加第一個輸入延遲填充工具庫

為了測量第一輸入延遲指標,你需要添加填充工具庫這個指標。有關安裝說明,請參閱庫的文檔

性能監控不需要添加這個 polyfill 庫來報告其他 Web 應用程序指標。

步驟3:為初始數據顯示生成性能事件

當您成功地將 SDK 添加到您的應用程序時,Firebase 開始處理事件。如果您仍在本地開發,請與您的應用程序交互以生成用於初始數據收集和處理的事件。

  1. 在本地環境中提供和查看您的 Web 應用程序。

  2. 通過為您的站點加載子頁面、與您的應用程序交互和/或觸發網絡請求來生成事件。確保在頁面加載後將瀏覽器選項卡保持打開至少 10 秒。

  3. 轉至性能儀表板的火力地堡控制台。您應該會在幾分鐘內看到初始數據顯示。

    如果您沒有看到您的初始數據顯示,查看故障排除提示

步驟4:對性能事件(可選)查看日誌信息

  1. 打開瀏覽器的開發者工具(例如,網絡選項卡為Chrome開發者工具,或在網絡監視器用於Firefox )。

  2. 在瀏覽器中刷新您的 Web 應用程序。

  3. 檢查您的日誌消息是否有任何錯誤消息。

  4. 幾秒鐘後,找了網絡呼叫firebaselogging.googleapis.com在瀏覽器的開發者工具。該網絡調用的存在表明瀏覽器正在向 Firebase 發送性能數據。

如果您的應用不記錄性能事件,查看故障排除提示

步驟5:(可選)添加自定義的監視特定代碼

要監視特定代碼在您的應用程序相關聯,可以儀器性能數據自定義代碼的痕跡

使用自定義代碼跟踪,您可以測量應用完成特定任務或任務集所需的時間,例如加載一組圖像或查詢您的數據庫。自定義代碼跟踪的默認指標是其持續時間,但您也可以添加自定義指標,例如緩存命中和內存警告。

在您的代碼中,您可以使用性能監控 SDK 提供的 API 定義自定義代碼跟踪的開始和結束(並添加任何所需的自定義指標)。

訪問添加監視特定代碼,以了解更多有關這些功能,以及如何將它們添加到您的應用程序。

第6步:部署應用程序,然後查看結果

驗證性能監控後,您可以向用戶部署應用的更新版本。

您可以監視性能數據的性能儀表板的火力地堡控制台。

下一步