本頁面由 Cloud Translation API 翻譯而成。

Switch to English

Web 性能監控入門

在你開始之前

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

創建 Firebase 項目
向 Firebase 註冊您的網絡應用
要使用性能的Web應用程序監控，則必須在火力地堡控制台添加您的應用程序作為一個火力地堡的Web應用程序。
如果您已經使用火力地堡的產品在現有網絡應用程序，並要開始使用性能監控SDK，你必須更新你的火力地堡的配置對象，包括您appID 。

請注意，當您添加火力地堡到您的應用程序，你也可以完成一些步驟在此頁面上描述的（例如，增加火力地堡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 並將其初始化延遲到您的頁面加載後：

將以下腳本添加到索引文件的標題中。
確保為您應用的火力地堡項目配置對象。

(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 和標頭腳本

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

火力性能監視用途fetch和Promise的API，其並非適用於舊的瀏覽器。這些 API 的 polyfill 包含在標準 Firebase 性能監控 JS SDK 中，但獨立 SDK 中省略了它們以減小尺寸。

性能監測SDK依賴，部分地基於對資源定時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.8.1/firebase-performance-standalone.js'
firebaseConfig是您的應用程序的火力地堡配置對象

標準SDK

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

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

包括標準的性能監控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>

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

包括性能監控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>

在您的應用中初始化 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 時在本地測試您的性能監控集成

在本地測試您的性能監控一體化， firebase serve目前不支持初始化火力地堡的性能通過監控/__/firebase/init.js URL。相反，包括您的 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 NPM包，並保存到您package.json運行文件：
```
npm install --save firebase
```

包括性能監控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";

在您的應用中初始化 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 開始處理事件。如果您仍在本地開發，請與您的應用程序交互以生成用於初始數據收集和處理的事件。

在本地環境中提供和查看您的 Web 應用程序。
通過為您的站點加載子頁面、與您的應用程序交互和/或觸發網絡請求來生成事件。確保在頁面加載後將瀏覽器選項卡保持打開至少 10 秒。
轉至性能儀表板的火力地堡控制台。您應該會在幾分鐘內看到初始數據顯示。
如果您沒有看到您的初始數據顯示，查看故障排除提示。

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

打開瀏覽器的開發者工具（例如，網絡選項卡為Chrome開發者工具，或在網絡監視器用於Firefox ）。
在瀏覽器中刷新您的 Web 應用程序。
檢查您的日誌消息是否有任何錯誤消息。
幾秒鐘後，找了網絡呼叫firebaselogging.googleapis.com在瀏覽器的開發者工具。該網絡調用的存在表明瀏覽器正在向 Firebase 發送性能數據。

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

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

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

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

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

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

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

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

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

下一步

獲取實踐與經驗火力地堡性能監控的Web程式碼實驗室。
了解有關性能監控自動收集的數據的更多信息：
- 對於數據頁面加載在你的應用程序
- 數據為HTTP / S的網絡請求通過您的應用程序發出
查看，跟踪和過濾器的性能在火力地堡控制台數據
添加監視你的應用程序特定的任務或工作流通過插裝的自定義代碼的痕跡
使用屬性過濾性能數據