Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
本頁面由 Cloud Translation API 翻譯而成。
Switch to English

Web的Firebase性能監控

在此代碼實驗室中,您將學習如何使用Firebase Performance Monitoring來衡量聊天Web應用程序的性能。訪問https://fireperf-friendlychat.web.app/觀看實時演示。

3b1284f5144b54f6.png

你會學到什麼

  • 如何將Firebase Performance Monitoring添加到您的Web應用程序以獲取現成的指標(頁面加載和網絡請求)。
  • 如何使用自定義跟踪來度量特定的代碼段。
  • 如何記錄與自定義跟踪相關的其他自定義指標。
  • 如何使用自定義屬性進一步細分效果數據。
  • 如何使用性能監視儀表板來了解Web應用程序的性能。

你需要什麼

  • 您選擇的IDE或文本編輯器,例如WebStormAtomSublimeVS Code
  • 終端/控制台
  • 您選擇的瀏覽器,例如Chrome
  • 該代碼實驗室的示例代碼(有關如何獲取代碼,請參見本代碼實驗室的下一部分。)

從命令行克隆代碼實驗室的GitHub存儲庫

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

或者,如果您尚未安裝git,則可以將回購作為zip文件下載

導入入門應用

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

創建一個Firebase項目

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

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

  1. 單擊創建項目

將Firebase Web應用添加到項目

  1. 點擊網頁圖標58d6543a156e56f9.png創建一個新的Firebase Web應用程序。
  2. 使用暱稱“ Friendly Chat註冊該應用程序,然後選中“同時為此應用程序設置Firebase託管”旁邊的框。
  3. 點擊註冊應用
  4. 單擊其餘步驟。您無需立即按照屏幕上的說明進行操作;這些將在本代碼實驗室的後續步驟中介紹。

ea9ab0db531a104c.png

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

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

您需要啟用Google登錄:

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

d89fb3873b5d36ae.png

啟用Cloud Firestore

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

您需要啟用Cloud Firestore:

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

此代碼實驗室的入門代碼包括更安全的規則。稍後我們將在代碼實驗室中部署它們。

24bd1a097492eac6.png

啟用雲存儲

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

您需要啟用雲存儲:

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

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

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

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

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

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

我們已經設置了Web應用程序模板,以從應用程序的本地目錄(您之前在代碼實驗室中克隆的存儲庫)中提取Firebase Hosting的應用程序配置。但是要提取配置,我們需要將您的應用程序與Firebase項目關聯。

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

如果您有多個環境(生產,暫存等),則別名很有用。但是,對於此代碼實驗室,我們僅使用default的別名。

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

有多種方法可以與Firebase Performance Monitoring SDK for Web集成(有關詳細信息,請參閱文檔)。在此代碼實驗室中,我們將從Hosting URLs啟用性能監視。

添加性能監控並初始化Firebase

  1. 打開public/index.html文件,然後在TODO下添加以下行以包括Firebase Performance Monitoring SDK。

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
  1. 我們還需要使用配置對像初始化Firebase SDK,該配置對象包含有關Firebase項目和我們要使用的Web應用程序的信息。由於我們使用的是Firebase託管,因此您可以導入一個特殊的腳本來為您執行此配置。對於此代碼實驗室,我們已經在public/index.html文件的底部為您添加了以下行,但是請仔細檢查它是否存在。

index.html

<script src="/__/firebase/init.js"></script>
  1. public/scripts/main.js文件中,在TODO下面添加以下行以初始化性能監視。

main.js

// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();

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

添加第一個輸入延遲polyfill庫

第一次輸入延遲非常有用,因為瀏覽器對用戶交互的響應會給用戶帶來有關應用程序響應性的第一印象。

當用戶首次與頁面上的元素進行交互(例如單擊按鈕或超鏈接)時,開始輸入延遲。瀏覽器能夠響應輸入後,它將立即停止,這意味著瀏覽器不忙於加載或解析您的內容。

該polyfill庫對於性能監視集成是可選的。

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

index.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 Performance Monitoring的集成!

在以下步驟中,您將了解有關使用Firebase Performance Monitoring添加自定義跟踪的信息。如果只想收集自動跟踪,請轉到“部署並開始發送圖像”部分。

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

  1. public/scripts/main.js文件中,獲取一個性能對象,然後創建一個自定義跟踪以上傳圖像消息。

main.js

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

main.js

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

 ...

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

您已經成功定義了定制跟踪!部署代碼後,如果用戶發送圖像消息,則將記錄自定義跟踪的持續時間。這將使您了解現實世界中的用戶在您的聊天應用中發送圖像需要多長時間。

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

  1. 找到上一步中的自定義跟踪(在public/scripts/main.js文件中定義)。
  2. TODO下方添加以下行,以記錄上載圖像的大小。

main.js

 ...

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

 ...

通過該指標,性能監視可以記錄自定義跟踪持續時間以及上載的圖像大小。

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

  1. 使用在public/scripts/main.js文件中定義的定制跟踪。
  2. TODO下面添加以下行,以記錄上載圖像的MIME類型。

main.js

 ...

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

 ...

使用此屬性,性能監視可以基於上載的圖像類型對自定義跟踪持續時間進行分類。

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

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

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

index.html

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

index.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 Performance Monitoring自動收集。稍後,您將能夠在Firebase Performance控制台中找到一個名為loadStyling的自定義跟踪。

部署到Firebase託管

將Firebase Performance Monitoring添加到代碼中之後,請按照以下步驟將代碼部署到Firebase Hosting:

  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 Hosting完全託管: https://<projectId>.firebaseapp.comhttps://<projectId>.web.app

驗證是否啟用了性能監視

打開Firebase控制台,然後轉到“性能”選項卡。如果您看到顯示“檢測到SDK”的歡迎消息,則說明您已成功與Firebase Performance Monitoring集成!

ac917a089e9c89d1.png

發送圖片信息

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

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

新消息應與您選擇的圖像一起顯示在應用的用戶界面中。

部署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. 瀏覽它們以找出緩慢的請求,然後開始進行修復以提高應用程序的性能!

1ab598284eea6581.png

您已啟用Firebase SDK來進行性能監視,並收集了自動跟踪和自定義跟踪來衡量您的聊天應用程序的實際性能!

我們涵蓋了:

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

了解更多: