Google is committed to advancing racial equity for Black communities. See how.
本頁面由 Cloud Translation API 翻譯而成。
Switch to English

開始使用Performance Performance for Web

在你開始之前

如果尚未開始,請訪問“ 將Firebase添加到JavaScript項目”以了解如何:

  • 創建一個Firebase項目

  • 在Firebase中註冊您的Web應用

請注意,將應用程序添加到Firebase項目時,您可能還需要完成以下指南中的某些步驟(例如, 添加Firebase SDK和初始化Firebase )。

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

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

  • 從CDN (獨立SDK)中獲取 -如果“性能監控”是應用程序中唯一的Firebase產品,則此選項將從CDN加載單個輕量級的SDK。

  • 從CDN (標準SDK)開始 -如果您在應用中使用其他Firebase產品,則此選項將從CDN加載Performance Monitoring SDK以及其他Firebase庫。

  • 來自託管URL-如果您使用的是Firebase託管,此選項為初始化Firebase時管理Firebase配置提供了便利。

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

添加SDK之後,Firebase會立即開始監視自動持續時間跟踪自動HTTP / S網絡請求

從CDN

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

要包括CDN中的Performance Monitoring SDK,您有兩個選擇:

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

獨立SDK

如果Performance Monitor是您應用中​​唯一的Firebase產品,請對以下內容使用獨立的Performance Monitoring SDK(以及下面的推薦標頭腳本):

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

要將獨立的Performance Monitoring 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/7.17.2/firebase-performance-standalone.js'
  • firebaseConfig是您應用的Firebase配置對象

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

標準SDK

如果您在使用其他Firebase產品(例如應用程序中的Authentication或Cloud Firestore),請包括標準Performance Monitoring SDK。

請注意,此SDK要求您包括單獨的標準Firebase核心SDK,並在單獨的腳本中初始化Firebase和Performance Monitoring。

  1. 要包括標準Performance Monitoring 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/7.17.2/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/7.17.2/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託管時,可以配置您的應用程序以從保留的URL動態加載Firebase JavaScript SDK庫。了解有關通過保留的主機URL添加SDK的更多信息。

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

  1. 要包括Performance Monitoring 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/7.17.2/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/7.17.2/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. 要包括Performance Monitoring 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庫。有關安裝說明,請參閱庫的文檔

Performance Monitoring不需要添加此polyfill庫即可報告其他Web應用程序指標。

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

當Firebase接收到來自應用程序的事件信息(例如應用程序交互)時,它可以檢測到您已成功將SDK添加到應用程序中。如果您仍在本地進行開發,請與您的應用交互以生成事件以進行SDK檢測以及初始數據收集和處理。

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

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

  3. 轉到Firebase控制台的“ 性能”部分 ,查看Firebase是否已檢測到SDK。

    如果您沒有看到“檢測到SDK”消息,請查看故障排除提示

  4. 性能監控在將性能事件數據顯示在性能儀表板中之前對其進行處理。您應該在看到SDK檢測消息後的24小時內看到初始數據顯示。

    如果看不到初始數據,請查看故障排除提示

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

  1. 打開瀏覽器的開發人員工具(例如, Chrome開發者工具的“網絡”標籤Firefox中的“ 網絡監視器” )。

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

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

  4. 幾秒鐘後,在瀏覽器的開發人員工具中查找對firebaselogging.googleapis.com的網絡調用。該網絡呼叫的存在表明瀏覽器正在將性能數據發送到Firebase。

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

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

您可以創建自定義跟踪來監視與您的應用程序中的特定代碼關聯的性能數據。

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

在代碼中,使用Performance Monitoring SDK提供的API定義自定義跟踪的開始和結束(並添加任何所需的自定義指標)。

訪問“ 添加針對特定應用程序代碼的自定義監控”,以了解有關這些功能以及如何將其添加到您的應用程序的更多信息。

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

驗證性能監控後,可以將應用程序的更新版本部署給用戶。

您可以在Firebase控制台的“ 性能”儀表板中監視性能數據。

下一步