網頁版 Firebase 性能監控

一、概述

在此 Codelab 中，您將了解如何使用 Firebase 性能監控來衡量聊天網絡應用的性能。訪問https://fireperf-friendlychat.web.app/觀看現場演示。

3b1284f5144b54f6.png

你會學到什麼

  • 如何將 Firebase 性能監控添加到您的網絡應用以獲取開箱即用的指標（頁面加載和網絡請求）。
  • 如何使用自定義跟踪測量特定代碼段。
  • 如何記錄與自定義跟踪相關的其他自定義指標。
  • 如何使用自定義屬性進一步細分您的績效數據。
  • 如何使用性能監控儀表板來了解您的 Web 應用程序的性能。

你需要什麼

  • 您選擇的 IDE 或文本編輯器，例如WebStorm 、 Atom 、 Sublime或VS Code
  • 終端/控制台
  • 您選擇的瀏覽器，例如 Chrome
  • Codelab 的示例代碼（有關如何獲取代碼，請參閱本 Codelab 的下一部分。）

2.獲取示例代碼

從命令行克隆 codelab 的GitHub 存儲庫：

git clone https://github.com/firebase/codelab-friendlychat-web

或者，如果您沒有安裝 git，您可以將 repo 下載為 zip 文件。

導入入門應用

使用您的 IDE，從克隆的存儲庫中打開或導入 📁 performance-monitoring-start目錄。這個 📁 performance-monitoring-start目錄包含 codelab 的起始代碼，它是一個聊天網絡應用程序。

3. 創建並設置 Firebase 項目

創建一個 Firebase 項目

  1. 在Firebase 控制台中，單擊添加項目。
  2. 將您的 Firebase 項目命名為FriendlyChat 。

記住您的 Firebase 項目的項目 ID。

  1. 單擊創建項目。

將 Firebase 網絡應用添加到項目中

  1. 點擊網頁圖標58d6543a156e56f9.png創建一個新的 Firebase 網絡應用。
  2. 使用暱稱Friendly Chat註冊該應用，然後選中Also setup Firebase Hosting for this app旁邊的框。
  3. 點擊註冊應用。
  4. 單擊剩餘的步驟。您現在不需要按照屏幕上的說明進行操作；這些將在本 Codelab 的後續步驟中介紹。

ea9ab0db531a104c.png

為 Firebase 身份驗證啟用 Google 登錄

為了允許用戶使用他們的 Google 帳戶登錄聊天應用程序，我們將使用Google登錄方法。

您需要啟用Google登錄：

  1. 在 Firebase 控制台中，找到左側面板中的“開發”部分。
  2. 單擊身份驗證，然後單擊登錄方法選項卡（轉到控制台）。
  3. 啟用Google登錄提供商，然後點擊保存。

7f3040a646c2e502.png

啟用 Cloud Firestore

該網絡應用使用Cloud Firestore來保存聊天消息並接收新的聊天消息。

您需要啟用 Cloud Firestore：

  1. 在 Firebase 控制台的開發部分中，單擊數據庫。
  2. 單擊 Cloud Firestore 窗格中的創建數據庫。
  3. 選擇Start in test mode選項，然後在閱讀有關安全規則的免責聲明後單擊Enable 。

此 Codelab 的起始代碼包含更安全的規則。我們稍後會在代碼實驗室中部署它們。

24bd1a097492eac6.png

啟用雲存儲

該網絡應用使用 Cloud Storage for Firebase 來存儲、上傳和共享圖片。

您需要啟用雲存儲：

  1. 在 Firebase 控制台的開發部分，點擊存儲。
  2. 單擊開始。
  3. 閱讀有關Firebase項目安全規則的免責聲明，然後點擊 了解 。

起始代碼包括一個基本的安全規則，我們稍後將在代碼實驗室中部署它。

4.安裝Firebase命令行界面

Firebase 命令行界面 (CLI) 允許您使用 Firebase 託管在本地為您的 Web 應用程序提供服務，以及將您的 Web 應用程序部署到您的 Firebase 項目。

  1. 按照 Firebase 文檔中的這些說明安裝 CLI。
  2. 通過在終端中運行以下命令來驗證 CLI 是否已正確安裝：
firebase --version

確保您的 Firebase CLI 版本是 v8.0.0 或更高版本。

  1. 通過運行以下命令授權 Firebase CLI：
firebase login

我們已設置 Web 應用模板，以便從應用的本地目錄（您之前在代碼實驗室中克隆的存儲庫）中提取應用的 Firebase 託管配置。但要提取配置，我們需要將您的應用與您的 Firebase 項目相關聯。

  1. 確保您的命令行正在訪問您的應用程序的本地performance-monitoring-start目錄。
  2. 通過運行以下命令將您的應用與 Firebase 項目相關聯：
firebase use --add
  1. 出現提示時，選擇您的項目 ID，然後為您的 Firebase 項目指定一個別名。

如果您有多個環境（生產、登台等），則別名很有用。但是，對於這個 codelab，我們只使用default的別名。

  1. 按照命令行中的其餘說明進行操作。

5. 與 Firebase 性能監控集成

有多種方法可以與 Web 版 Firebase 性能監控 SDK 集成（有關詳細信息，請參閱文檔）。在此 Codelab 中，我們將從Hosting URLs啟用性能監控。

添加性能監控並初始化 Firebase

  1. 打開src/index.js文件，然後在TODO下方添加以下行以包含 Firebase 性能監控 SDK。

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. 我們還需要使用包含有關 Firebase 項目和我們要使用的 Web 應用程序的信息的配置對象來初始化 Firebase SDK。由於我們使用的是 Firebase 託管，因此您可以導入一個特殊的腳本來為您執行此配置。對於此 Codelab，我們已經在public/index.html文件的底部為您添加了以下行，但請仔細檢查它是否存在。

索引.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. 在src/index.js文件中，在TODO下方添加以下行來初始化性能監控。

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

性能監控現在將在用戶使用您的網站時自動為您收集頁面加載和網絡請求指標！請參閱文檔以了解有關自動頁面加載跟踪的更多信息。

添加第一個輸入延遲 polyfill 庫

首次輸入延遲很有用，因為瀏覽器對用戶交互的響應會給用戶他們對應用響應能力的第一印象。

首次輸入延遲從用戶第一次與頁面上的元素交互時開始，例如單擊按鈕或超鏈接。它在瀏覽器能夠響應輸入後立即停止，這意味著瀏覽器沒有忙於加載或解析您的內容。

這個 polyfill 庫對於性能監控集成是可選的。

打開public/index.html文件，然後取消註釋以下行。

索引.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

至此，您已經在代碼中完成了與 Firebase 性能監控的集成！

在以下步驟中，您將了解如何使用 Firebase 性能監控添加自定義跟踪。如果您只想收集自動跟踪，請轉到“部署並開始發送圖像”部分。

6. 為您的應用添加自定義跟踪

性能監控允許您創建自定義跟踪。自定義跟踪是應用中執行塊持續時間的報告。您可以使用 SDK 提供的 API 定義自定義跟踪的開始和結束。

  1. 在src/index.js文件中，獲取性能對象，然後創建用於上傳圖像消息的自定義跟踪。

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. 要記錄自定義跟踪，您需要指定跟踪的起點和終點。您可以將跟踪視為計時器。

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

您已成功定義自定義跟踪！部署代碼後，如果用戶發送圖像消息，將記錄自定義跟踪的持續時間。這將使您了解真實用戶在您的聊天應用程序中發送圖像需要多長時間。

7. 為您的應用添加自定義指標。

您可以進一步配置自定義跟踪以記錄其範圍內發生的與性能相關的事件的自定義指標。例如，您可以使用指標來調查上傳時間是否受我們在上一步中定義的自定義跟踪的圖像大小的影響。

  1. 找到上一步中的自定義跟踪（在您的src/index.js文件中定義）。
  2. 在TODO下面添加以下行來記錄上傳圖片的大小。

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

此指標使性能監控能夠記錄自定義跟踪持續時間以及上傳的圖像大小。

8. 為您的應用添加自定義屬性

在前面的步驟的基礎上，您還可以在自定義跟踪上收集自定義屬性。自定義屬性有助於按特定於您的應用的類別對數據進行細分。例如，您可以收集圖像文件的 MIME 類型以調查 MIME 類型可能如何影響性能。

  1. 使用src/index.js文件中定義的自定義跟踪。
  2. 在TODO下面添加以下行來記錄上傳圖片的 MIME 類型。

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

此屬性使性能監控能夠根據上傳的圖像類型對自定義跟踪持續時間進行分類。

9. [擴展] 使用 User Timing API 添加自定義跟踪

Firebase 性能監控 SDK 的設計使其可以異步加載，因此不會在頁面加載期間對 Web 應用程序的性能產生負面影響。在加載 SDK 之前，Firebase 性能監控 API 不可用。在這種情況下，您仍然可以使用User Timing API添加自定義跟踪。 Firebase 性能 SDK 將從measure()獲取持續時間並將它們記錄為自定義跟踪。

我們將使用 User Timing API 測量加載應用程序樣式腳本的持續時間。

  1. 在public/index.html文件中，添加以下行以標記應用樣式腳本加載的開始。

索引.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. 添加以下行以標記應用樣式腳本加載的結束，並測量開始和結束之間的持續時間。

索引.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

您在此處創建的條目將由 Firebase 性能監控自動收集。稍後您將能夠在 Firebase 性能控制台中找到名為loadStyling的自定義跟踪。

10. 部署並開始發送鏡像

部署到 Firebase 託管

將 Firebase 性能監控添加到您的代碼後，請按照以下步驟將您的代碼部署到 Firebase 託管：

  1. 確保您的命令行正在訪問您的應用程序的本地performance-monitoring-start目錄。
  2. 通過運行以下命令將文件部署到 Firebase 項目：
firebase deploy
  1. 控制台應顯示以下內容：
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. 訪問您現在使用 Firebase 託管在您自己的兩個 Firebase 子域中完全託管的網絡應用： https://<projectId>.firebaseapp.com和https://<projectId>.web.app 。

驗證是否啟用了性能監控

打開Firebase 控制台並轉到性能選項卡。如果您看到顯示“檢測到 SDK”的歡迎消息，則您已成功集成 Firebase 性能監控！

30df67e5a07d03b0.png

發送圖片消息

通過在您的聊天應用程序中發送圖像來生成一些性能數據。

  1. 登錄到您的聊天應用程序後，單擊圖像上傳按鈕13734cb66773e5a3.png .
  2. 使用文件選擇器選擇圖像文件。
  3. 嘗試發送多張圖片（一些樣本存儲在public/images/中），以便您可以測試自定義指標和自定義屬性的分佈。

新消息應與您選擇的圖像一起顯示在應用程序的 UI 中。

11.監控儀表板

在部署您的 Web 應用並以用戶身份發送圖像消息後，您可以在性能監控儀表板（在 Firebase 控制台中）查看性能數據。

訪問您的儀表板

  1. 在Firebase 控制台中，選擇包含您的Friendly Chat應用的項目。
  2. 在左側面板中，找到Quality部分，然後單擊Performance 。

查看設備上的數據

性能監控處理完您的應用數據後，您將在儀表板頂部看到選項卡。如果您還沒有看到任何數據或標籤，請務必稍後再回來查看。

  1. 單擊在設備上選項卡。
  • 頁面加載表顯示了性能監控在頁面加載時自動收集的各種性能指標。
  • 持續時間表顯示您在應用程序代碼中定義的任何自定義跟踪。
  1. 單擊“持續時間”表中的saveImageMes​​sage以查看跟踪的特定指標。

e28758fd02d9ffac.png

  1. 單擊聚合以查看圖像大小的分佈。您可以查看為測量此自定義跟踪的圖像大小而添加的指標。

c3cbcfc0c739a0a8.png

  1. 單擊上一步中“聚合”旁邊的“隨著時間”。您還可以查看自定義跟踪的持續時間。單擊查看更多以更詳細地查看收集的數據。

16983baa31e05732.png

  1. 在打開的頁面中，您可以通過單擊imageType按圖像 MIME 類型對時長數據進行分段。由於您添加到自定義跟踪中的 imageType 屬性，此特定數據已被記錄。

8e5c9f32f42a1ca1.png

查看網絡數據

HTTP/S 網絡請求是捕獲網絡調用的響應時間和負載大小的報告。

  1. 返回性能監控儀表板的主屏幕。
  2. 單擊“網絡”選項卡以查看您的 Web 應用程序的網絡請求條目列表。
  3. 瀏覽它們以識別緩慢的請求並開始修復以提高應用程序的性能！

26a2be152a77ffb9.png

12. 恭喜！

您已啟用 Firebase SDK 進行性能監控，並收集了自動跟踪和自定義跟踪來衡量您的聊天應用的實際性能！

我們涵蓋的內容：

  • 將 Firebase 性能監控 SDK 添加到您的網絡應用。
  • 將自定義跟踪添加到您的代碼。
  • 記錄與自定義跟踪相關的自定義指標。
  • 使用自定義屬性細分性能數據。
  • 了解如何使用性能監控儀表板來深入了解您的應用程序的性能。

學到更多：