性能監控使用跟踪來收集有關應用程序中受監控進程的數據。跟踪是包含應用程序中兩個時間點之間捕獲的數據的報告。
對於 Web 應用程序，性能監控會自動收集應用程序每個頁面的跟踪（稱為頁面加載跟踪） 。每個頁面加載跟踪收集以下默認指標：
第一次繪製——衡量用戶導航到頁面和發生任何視覺變化之間的時間的指標
第一次內容繪製——衡量用戶導航到頁面和顯示有意義的內容（例如圖像或文本）之間的時間的指標
domInteractive — 衡量用戶導航到頁面與該頁面被視為對用戶具有交互性之間的時間的指標
domContentLoadedEventEnd — 衡量用戶導航到頁面與初始 HTML 文檔完全加載和解析之間的時間的指標
loadEventEnd — 衡量用戶導航到頁面與當前文檔的加載事件完成之間的時間的指標
首次輸入延遲——衡量用戶與頁面交互和瀏覽器能夠響應該輸入之間的時間的指標
您可以在跟踪表的“頁面加載”子選項卡中查看這些跟踪中的數據，該表位於“性能”儀表板的底部（稍後將在本頁中了解有關使用控制台的更多信息）。
頁面加載跟踪的定義
此跟踪測量有關應用程序中的頁面如何加載的多個指標，特別是到達常見加載點（例如響應式應用程序）所需的時間。
頁面加載跟踪可幫助您跟踪應用程序的核心網絡生命週期，例如首次內容繪製。
為頁面加載跟踪收集的指標
這些跟踪是開箱即用的跟踪，因此您無法向其中添加自定義指標或自定義屬性。
第一次油漆
該指標衡量用戶導航到頁面和發生任何視覺變化之間的時間。
該指標非常有用，因為第一次繪製會向用戶發出頁面正在開始加載的信號。
當用戶導航到頁面時啟動。
當發生任何視覺變化時停止，包括背景顏色變化或標題加載。
第一個內容豐富的油漆
該指標衡量用戶導航到頁面與顯示有意義的內容（例如圖像或文本）之間的時間。
此指標對於了解用戶多久看到應用程序的任何實際內容（而不僅僅是新的背景顏色或標題）非常有用。
當用戶導航到頁面時啟動。
在瀏覽器渲染 DOM 中的第一個內容（包括任何文本、圖像（包括背景圖像）、非白色畫布或 SVG）後立即停止。
dom互動
該指標測量用戶導航到頁面與該頁面被視為對用戶具有交互性之間的時間。
此指標有助於了解用戶多久可以實際與應用程序中的元素（如按鈕和超鏈接）進行交互，而不僅僅是在屏幕上看到它們。請注意，這並不意味著瀏覽器將響應交互（對於此指標，請參閱第一個輸入延遲跟踪）。
當用戶導航到頁面時啟動。
在用戶代理將當前 HTML 文檔的就緒狀態設置為“交互”之前立即停止。
domContentLoadedEventEnd
該指標測量用戶導航到頁面與初始 HTML 文檔完全加載和解析之間的時間。
當用戶導航到頁面時啟動。
在初始 HTML 文檔完全加載和解析 (
DOMContentLoaded) 後立即停止，但這並不意味著樣式表、圖像和子框架已完成加載。
加載事件結束
該指標測量用戶導航到頁面與當前文檔的加載事件完成之間的時間。
此指標對於了解加載所有內容（包括樣式表和圖像）所需的時間非常有用。
當用戶導航到頁面時啟動。
當前 HTML 文檔的加載事件完成後立即停止。
第一個輸入延遲
該指標衡量用戶與頁面交互和瀏覽器能夠響應該輸入之間的時間。
該指標非常有用，因為響應用戶交互的瀏覽器可以讓用戶對應用程序的響應能力產生第一印象。
當用戶第一次與頁面上的元素交互時啟動，例如單擊按鈕或超鏈接。
在瀏覽器能夠響應輸入後立即停止，這意味著瀏覽器不忙於加載或解析您的內容。
請注意，要測量第一個輸入延遲指標，您需要為此指標添加 polyfill 庫。有關安裝說明，請參閱庫的文檔。
跟踪、查看和過濾性能數據
要查看實時性能數據，請確保您的應用使用與實時數據處理兼容的性能監控 SDK 版本。了解有關實時性能數據的更多信息。
跟踪儀表板中的關鍵指標
要了解關鍵指標的趨勢，請將它們添加到績效儀表板頂部的指標板中。您可以通過查看每週的變化來快速識別回歸，或者驗證代碼中的最新更改是否正在提高性能。
要將指標添加到指標板，請執行以下步驟：
- 轉到 Firebase 控制台中的性能儀表板。
- 單擊空指標卡，然後選擇現有指標以添加到您的看板中。
- 單擊填充的指標卡上的可獲取更多選項，例如替換或刪除指標。
指標板以圖形形式和數字百分比變化的形式顯示隨時間推移收集的指標數據。
了解有關使用儀表板的更多信息。
查看踪跡及其數據
要查看跟踪，請轉到 Firebase 控制台中的性能儀表板，向下滾動到跟踪表，然後單擊相應的子選項卡。該表顯示每個跟踪的一些主要指標，您甚至可以按特定指標的百分比變化對列表進行排序。
性能監控在 Firebase 控制台中提供了一個故障排除頁面，其中突出顯示了指標更改，從而可以輕鬆快速解決性能問題並最大程度地減少其對應用和用戶的影響。當您了解潛在的性能問題時，您可以使用故障排除頁面，例如，在以下場景中：
- 您在儀表板上選擇相關指標，您會注意到一個很大的增量。
- 在跟踪表中，您進行排序以在頂部顯示最大增量，並且您會看到顯著的百分比變化。
- 您會收到一封電子郵件警報，通知您出現性能問題。
您可以通過以下方式進入故障排除頁面：
- 在指標儀表板上，單擊查看指標詳細信息按鈕。
- 在任何指標卡上，選擇 => 查看詳細信息。故障排除頁面顯示有關您選擇的指標的信息。
- 在跟踪表中，單擊跟踪名稱或與該跟踪關聯的行中的任何指標值。
- 在電子郵件警報中，單擊“立即調查” 。
當您單擊跟踪表中的跟踪名稱時，您可以深入了解感興趣的指標。單擊“過濾器按鈕可按屬性過濾數據，例如：
- 按頁面 URL過濾以查看網站特定頁面的數據
- 按有效連接類型過濾，了解 3g 連接如何影響您的應用
- 按國家/地區過濾以確保您的數據庫位置不會影響特定區域
了解有關查看跟踪數據的更多信息。
下一步
了解有關使用屬性檢查性能數據的更多信息。
詳細了解如何在 Firebase 控制台中跟踪性能問題。
針對會降低應用程序性能的頁面加載設置警報。例如，如果特定頁面的首次輸入延遲超過您設置的閾值，您可以為您的團隊配置電子郵件警報。