網頁版 Firebase 性能監控

1. 概述

在此 Codelab 中，您將學習如何使用 Firebase 性能監控來衡量聊天 Web 應用的性能。訪問https://fireperf-Friendlychat.web.app/查看現場演示。

3b1284f5144b54f6.png

你將學到什麼

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

你需要什麼

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

2. 獲取示例代碼

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

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

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

導入入門應用程序

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

3. 創建並設置 Firebase 項目

創建 Firebase 項目

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

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

  1. 單擊“創建項目” 。

將 Firebase Web 應用添加到項目中

  1. 單擊網絡圖標58d6543a156e56f9.png創建一個新的 Firebase Web 應用。
  2. 使用暱稱Friendly Chat註冊應用程序，然後選中“同時為此應用程序設置 Firebase 託管”旁邊的框。
  3. 單擊註冊應用程序。
  4. 單擊完成剩餘步驟。您現在不需要按照屏幕上的說明進行操作；這些將在本 Codelab 的後續步驟中介紹。

ea9ab0db531a104c.png

啟用 Google 登錄以進行 Firebase 身份驗證

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

您需要啟用Google登錄：

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

7f3040a646c2e502.png

啟用 Cloud Firestore

Web 應用程序使用Cloud Firestore保存聊天消息並接收新的聊天消息。

您需要啟用 Cloud Firestore：

  1. 在 Firebase 控制台的“開發”部分中，單擊“數據庫” 。
  2. 單擊 Cloud Firestore 窗格中的創建數據庫。
  3. 選擇“以測試模式啟動”選項，然後在閱讀有關安全規則的免責聲明後單擊“啟用” 。

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

24bd1a097492eac6.png

啟用雲存儲

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

您需要啟用雲存儲：

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

起始代碼包含基本安全規則，我們稍後將在 Codelab 中部署該規則。

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 應用模板，以便從應用的本地目錄（您之前在 Codelab 中克隆的存儲庫）中提取應用的 Firebase 託管配置。但要提取配置，我們需要將您的應用程序與 Firebase 項目關聯。

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

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

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

5. 與 Firebase 性能監控集成

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

添加性能監控並初始化 Firebase

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

索引.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. 我們還需要使用一個配置對象來初始化 Firebase SDK，該對象包含有關 Firebase 項目和我們要使用的 Web 應用程序的信息。由於我們使用 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下方添加以下行以初始化性能監控。

索引.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文件中，獲取性能對象，然後創建用於上傳圖像消息的自定義跟踪。

索引.js

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

索引.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下面添加以下行來記錄上傳圖像的大小。

索引.js

 ...

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

 ...

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

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

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

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

索引.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. 訪問您的 Web 應用程序，該應用程序現已使用 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. 在左側面板中，找到“質量”部分，然後單擊“性能” 。

查看設備上的數據

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

  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 添加到您的 Web 應用。
  • 將自定義跟踪添加到您的代碼中。
  • 記錄與自定義跟踪相關的自定義指標。
  • 使用自定義屬性細分性能數據。
  • 了解如何使用性能監控儀表板來深入了解應用程序的性能。

了解更多：