获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

了解頁面加載性能數據(網絡應用)

性能監控使用跟踪來收集有關應用程序中受監控進程的數據。跟踪是一種報告,其中包含在您的應用程序中的兩個時間點之間捕獲的數據。

對於 Web 應用程序,性能監控會自動收集應用程序每個頁面的跟踪,稱為頁面加載跟踪。每個頁面加載跟踪都會收集以下默認指標:

  • 首次繪製— 衡量用戶導航到頁面與發生任何視覺變化之間的時間的指標

  • 首次內容繪製——衡量用戶導航到頁面與顯示有意義的內容(如圖像或文本)之間的時間的指標

  • domInteractive — 衡量從用戶導航到頁面到頁面被認為對用戶具有交互性之間的時間的度量

  • domContentLoadedEventEnd — 衡量用戶導航到頁面與初始 HTML 文檔完全加載和解析之間的時間的指標

  • loadEventEnd — 衡量用戶導航到頁面和當前文檔的加載事件完成之間的時間的指標

  • 首次輸入延遲— 衡量用戶與頁面交互與瀏覽器能夠響應該輸入之間的時間的指標

您可以在跟踪表的頁面加載子選項卡中查看來自這些跟踪的數據,該表位於性能儀表板的底部(在本頁後面了解有關使用控制台的更多信息)。

頁面加載跟踪的定義

此跟踪測量有關應用程序中的頁面如何加載的幾個指標,特別是到達常見加載點所需的時間,例如響應式應用程序。

頁面加載跟踪可幫助您跟踪應用的核心網絡生命力,例如第一次內容繪製。

為頁面加載跟踪收集的指標

這些跟踪是開箱即用的跟踪,因此您無法向它們添加自定義指標或自定義屬性。

第一次油漆

該指標衡量用戶導航到頁面與發生任何視覺變化之間的時間。

這個指標很有用,因為第一次繪製會向您的用戶發出頁面開始加載的信號。

  • 當用戶導航到頁面時開始。

  • 任何視覺變化發生時停止,包括背景顏色變化或標題加載。

第一次滿足的油漆

該指標衡量用戶導航到頁面與顯示有意義的內容(如圖像或文本)之間的時間。

該指標有助於深入了解用戶在多長時間內看到應用的任何實際內容,而不僅僅是新的背景顏色或標題。

  • 當用戶導航到頁面時開始。

  • 在瀏覽器從 DOM 呈現第一個內容後立即停止,包括任何文本、圖像(包括背景圖像)、非白色畫布或 SVG。

dom交互式

此度量標準衡量用戶導航到頁面與頁面被視為對用戶交互的時間之間的時間。

該指標有助於深入了解用戶在多長時間內可以實際與應用中的元素(例如按鈕和超鏈接)進行交互,而不僅僅是在屏幕上看到它們。請注意,這並不意味著瀏覽器會響應交互(有關此指標,請參閱第一個輸入延遲跟踪)。

  • 當用戶導航到頁面時開始。

  • 在用戶代理將當前 HTML 文檔的就緒狀態設置為“交互式”之前立即停止。

domContentLoadedEventEnd

該指標測量用戶導航到頁面與初始 HTML 文檔完全加載和解析之間的時間。

  • 當用戶導航到頁面時開始。

  • 在初始 HTML 文檔完全加載和解析 ( DOMContentLoaded ) 後立即停止,但這並不意味著樣式表、圖像和子框架已完成加載。

加載事件結束

該指標測量用戶導航到頁面和當前文檔的加載事件完成之間的時間。

該指標有助於深入了解加載所有內容(包括樣式表和圖像)所需的時間。

  • 當用戶導航到頁面時開始。

  • 在當前 HTML 文檔的加載事件完成後立即停止。

第一次輸入延遲

該指標衡量用戶與頁面交互與瀏覽器能夠響應該輸入之間的時間。

這個指標很有用,因為響應用戶交互的瀏覽器給了用戶他們對應用響應能力的第一印象。

  • 當用戶第一次與頁面上的元素交互時開始,例如單擊按鈕或超鏈接。

  • 在瀏覽器能夠響應輸入後立即停止,這意味著瀏覽器不忙於加載或解析您的內容。

請注意,要測量第一個輸入延遲指標,您需要為此指標添加 polyfill 庫。有關安裝說明,請參閱庫的文檔

跟踪、查看和過濾性能數據

要查看實時性能數據,請確保您的應用使用與實時數據處理兼容的性能監控 SDK 版本。了解有關實時性能數據的更多信息

跟踪儀表板中的關鍵指標

要了解關鍵指標的趨勢,請將它們添加到性能儀表板頂部的指標板上。您可以通過查看每週更改來快速識別回歸,或者驗證您的代碼中最近的更改是否正在提高性能。

Firebase 性能監控儀表板中的指標板圖像

要將指標添加到您的指標板,請執行以下步驟:

  1. 轉到 Firebase 控制台中的性能信息中心
  2. 單擊一個空的指標卡,然後選擇一個現有指標添加到您的板上。
  3. 單擊填充的指標卡上的以獲取更多選項,例如替換或刪除指標。

指標板以圖形形式和數字百分比變化顯示隨時間收集的指標數據。

了解有關使用儀表板的更多信息。

查看痕跡及其數據

要查看您的跟踪,請轉到 Firebase 控制台中的性能儀表板,向下滾動到跟踪表,然後單擊相應的子選項卡。該表顯示了每個跟踪的一些頂級指標,您甚至可以按特定指標的百分比變化對列表進行排序。

性能監控在 Firebase 控制台中提供了一個故障排除頁面,該頁面突出顯示了指標更改,從而可以輕鬆快速地解決並最大限度地減少性能問題對您的應用和用戶的影響。當您了解潛在的性能問題時,您可以使用故障排除頁面,例如,在以下情況下:

  • 您在儀表板上選擇相關指標,您會注意到一個很大的增量。
  • 在跟踪表中,您排序以在頂部顯示最大的增量,並且您會看到顯著的百分比變化。
  • 您會收到一封電子郵件警報,通知您存在性能問題。

您可以通過以下方式訪問故障排除頁面:

  • 在指標儀表板上,單擊查看指標詳細信息按鈕。
  • 在任何度量卡上,選擇 => 查看詳細信息。故障排除頁面顯示有關您選擇的指標的信息。
  • 在跟踪表中,單擊跟踪名稱或與該跟踪關聯的行中的任何度量值。
  • 在電子郵件警報中,單擊立即調查

當您單擊跟踪表中的跟踪名稱時,您可以深入了解感興趣的指標。點擊過濾按鈕,按屬性過濾數據,例如:

按屬性過濾的 Firebase 性能監控數據的圖像
  • 頁面 URL過濾以查看站點特定頁面的數據
  • 有效連接類型過濾以了解 3g 連接如何影響您的應用
  • 國家/地區過濾以確保您的數據庫位置不會影響特定區域

了解有關查看跟踪數據的更多信息。

下一步

  • 了解有關使用屬性檢查性能數據的更多信息。

  • 詳細了解如何在 Firebase 控制台中跟踪性能問題

  • 為降低應用程序性能的頁面加載設置警報。例如,如果特定頁面的第一個輸入延遲超過您設置的閾值,您可以為您的團隊配置電子郵件警報。