開始使用Performance Performance for Web

在你開始之前

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

創建一個Firebase項目
在Firebase中註冊您的Web應用
要在Web應用程序中使用性能監控，必須在Firebase控制台中將您的應用程序添加為Firebase Web App。
如果您已經在現有的Web應用程序中使用Firebase產品，並且想要開始使用Performance Monitoring SDK，則必須更新Firebase配置對像以包含appID 。

請注意，將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），則在需要它們時使用此選項導入單個模塊。

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

從CDN

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

要包括CDN中的Performance Monitoring SDK，您有兩個選擇：

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

獨立SDK

如果Performance Monitoring是您應用中唯一的Firebase產品，請對以下內容使用獨立的Performance Monitoring SDK（以及下面的推薦標頭腳本）：

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

要將獨立的Performance Monitoring 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.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

在哪裡，

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

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

了解獨立的Performance Monitoring SDK和標頭腳本

這個獨立的SDK已針對大小進行了優化；壓縮後，大約10kb。它具有Firebase性能監控的所有功能，以及最少的Firebase核心SDK功能集。

Firebase Performance Monitoring使用fetch和Promise API，這在舊版瀏覽器中不可用。這些API的polyfill已包含在標準的Firebase Performance Monitoring JS SDK中，但為減小尺寸而從獨立的SDK中將其省略。

Performance Monitoring 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.addEventListener('load', function() {
       firebase.initializeApp(firebaseConfigObject).performance();
   });
})(performance_standalone, firebaseConfig);

在哪裡，

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

標準SDK

如果您使用的是其他Firebase產品（例如應用程序中的身份驗證或Cloud Firestore），請包括標準的Performance Monitoring SDK。

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

要包括標準的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/8.4.1/firebase-app.js"></script>

  <!-- Add the standard Performance Monitoring library -->
  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-performance.js"></script>
<body>

在您的應用中初始化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配置。

要包括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/8.4.1/firebase-app.js"></script>

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

在您的應用中初始化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>

使用保留的主機URL時在本地測試Performance Monitoring集成

為了在本地測試您的Performance Monitoring集成， firebase serve當前不支持通過/__/firebase/init.js URL初始化Firebase進行Performance Monitoring。相反，請包括您的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
```

要包括Performance Monitoring 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";

在您的應用中初始化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 ：生成性能事件以顯示初始數據

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

在本地環境中服務和查看您的Web應用程序。
通過為您的網站加載子頁面，與您的應用進行交互和/或觸發網絡請求來生成事件。在頁面加載後，請確保至少打開瀏覽器標籤10秒鐘。
轉到Firebase控制台的“性能”儀表板。您將在幾分鐘後看到初始數據顯示。
如果看不到初始數據的顯示，請查看故障排除提示。

步驟4 ：（可選）查看性能事件的日誌消息

打開瀏覽器的開發人員工具（例如， Chrome開發者工具的“網絡”標籤或Firefox的網絡監視器）。
在瀏覽器中刷新您的Web應用。
檢查您的日誌消息中是否有任何錯誤消息。
幾秒鐘後，在瀏覽器的開發人員工具中查找對firebaselogging.googleapis.com的網絡調用。該網絡呼叫的存在表明瀏覽器正在將性能數據發送到Firebase。

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

步驟5 ：（可選）為特定代碼添加自定義監控

要監視與您的應用程序中的特定代碼關聯的性能數據，您可以檢測自定義代碼跟踪。

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

在代碼中，您可以使用Performance Monitoring SDK提供的API定義自定義代碼跟踪的開始和結束（並添加任何所需的自定義指標）。

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

第6步：部署您的應用程序，然後查看結果

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

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

下一步

通過Firebase Web Codelab性能監控獲得實踐經驗。
了解有關性能監控自動收集的數據的更多信息：
- 應用中頁面加載的數據
- 應用發出的HTTP / S網絡請求數據
在Firebase控制台中查看，跟踪和過濾性能數據
通過檢測自定義代碼跟踪，添加對應用程序中特定任務或工作流的監視
使用屬性過濾性能數據