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應用程序,Performance Monitoring會自動為應用程序的每個頁面收集一個跟踪,稱為頁面加載跟踪。每個頁面加載跟踪都會收集以下默認指標:

  • 首次繪製—一種度量標準,用於度量用戶導航到頁面與發生任何視覺變化之間的時間

  • 首個內容豐富的繪畫—一種度量標準,用於度量用戶導航到頁面與顯示有意義的內容(例如圖像或文本)之間的時間

  • domInteractive —度量標準,用於度量用戶導航到頁面與用戶認為頁面互動之間的時間

  • domContentLoadedEventEnd —一個度量標準,用於度量從用戶導航到頁面到完全加載和解析初始HTML文檔之間的時間

  • loadEventEnd —一種度量標準,用於度量用戶導航到頁面與當前文檔的加載事件完成之間的時間

  • 首次輸入延遲-一種度量標準,用於度量用戶與頁面互動到瀏覽器能夠響應該輸入之間的時間

從Firebase控制台的“在設備上”選項卡中的頁面加載跟踪中查看數據(在此頁面的後面了解更多信息)。

頁面加載跟踪的定義

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

頁面加載跟踪可幫助您跟踪應用程序的核心Web生命週期,例如第一個內容豐富的繪畫。

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

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

第一次油漆

此度量標準度量從用戶導航到頁面到發生任何視覺更改之間的時間。

此度量標準非常有用,因為第一次繪製會向您的用戶發送信號,表明頁面已開始加載。

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

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

首個滿意的塗料

此度量標準度量從用戶導航到頁面到顯示有意義的內容(例如圖像或文本)之間的時間。

此指標可幫助您洞悉用戶很快就會看到您應用的任何實際內容,而不僅僅是新的背景顏色或標題。

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

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

dom互動

此度量標準度量從用戶導航到頁面到頁面被認為對用戶而言交互式的時間。

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

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

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

domContentLoadedEventEnd

此度量標準度量從用戶導航到頁面到完全加載和解析初始HTML文檔之間的時間。

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

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

loadEventEnd

此度量標準度量從用戶導航到頁面到當前文檔的加載事件完成之間的時間。

此指標有助於洞悉加載所有內容(包括樣式表和圖像)所花費的時間。

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

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

第一次輸入延遲

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

該指標非常有用,因為瀏覽器對用戶交互的響應會給您的用戶有關應用程序響應性的第一印象。

  • 在用戶首次與頁面上的元素進行交互(例如單擊按鈕或超鏈接)時開始。

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

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

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

要查看實時性能數據,請確保您的應用使用與實時數據處理兼容的Performance Monitoring SDK版本。了解更多

跟踪儀表板中的關鍵指標

將關鍵指標添加到儀表板,以了解它們的趨勢。您可以通過查看每週的更改來快速確定回歸,或者驗證代碼中的最新更改正在改善性能。

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

要將指標添加到儀表板,請轉到Firebase控制台中的“性能”儀表板,然後單擊“儀表板”選項卡。單擊一個空的指標卡,然後選擇一個現有指標以添加到儀表板。在填充的指標卡上單擊 ,以獲取更多選項,例如替換或刪除指標。

儀表板以圖形形式和數值百分比形式顯示隨時間推移收集的度量標準數據。

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

查看所有痕跡及其數據

要查看這些跟踪,請轉到Firebase控制台中的“性能”儀表板,然後單擊“在設備上”選項卡。

在“設備上”選項卡上,您可以單擊各個屏幕以瀏覽跟踪並深入研究感興趣的指標。在大多數頁面上,可以使用“過濾器按鈕(屏幕的左上角)按屬性過濾數據,例如:

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

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

下一步