頁面性能極其影響用戶體驗,而用戶體驗很大程度地決定了用戶去留,因此前端性能監控和分析尤為重要。本文主要介紹如何使用ARMS前端監控為您診斷頁面緩慢的問題。

前提條件

您的前端應用已接入ARMS,具體操作,請參見前端監控接入概述。

診斷頁面緩慢的問題

以下步驟演示了一個排查策略示例的具體步驟:

  1. 登錄ARMS控制臺,在左側導航欄選擇前端監控 > 前端列表。
  2. 前端列表頁面頂部選擇目標地域,然后單擊目標應用名稱。
  3. 在左側導航欄選擇應用 > 訪問速度
  4. 頁面加載時間詳情區域和頁面加載瀑布圖區域查看關鍵性能指標是否有異常:
    圖 1. 頁面加載時間詳情
    頁面加載時間詳情
    圖 2. 頁面加載瀑布圖
    頁面加載瀑布圖
    • 如果頁面加載詳情區域的首次渲染時間偏高,或頁面加載瀑布圖區域的DNS查詢、TCP連接和SSL建連耗時偏高,表示頁面打開緩慢可能是由網絡原因造成的,那么您需要檢查網絡問題。
    • 如果頁面加載詳情區域的DOM Ready耗時偏高,或頁面加載瀑布圖區域的請求響應和內容傳輸耗時偏高,表示頁面打開緩慢的原因可能是API請求緩慢,那么您需要執行步驟4進行排查。
    • 如果頁面加載詳情區域的頁面完全加載時間偏高,或頁面加載瀑布圖區域的DOM解析和資源加載耗時偏高,表示頁面打開緩慢的原因可能是前端資源加載緩慢,那么您需要執行步驟5進行排查。
  5. 在左側導航欄選擇應用 > API詳情。
    1. API請求列表頁簽,單擊目標API右側操作列的分析。
      API Request List
    2. API詳情頁簽,單擊請求詳情區域右上角的查看調用鏈,查看前端監控的整體耗時和后端應用的調用時序圖:
      Trace
      • 如果后端應用處理時間較短,而整體耗時較長,則說明API請求從發送到服務端以及從服務端返回數據到瀏覽器端的網絡傳輸耗時較長。在此情況下,可以在API詳情頁面,單擊請求詳情區域右上角的查看會話,查看本次訪問的網絡制式、地域、瀏覽器、設備和操作系統等信息。
      • 如果后端應用處理時間較長,則說明后端處理的性能較差。此時可在方法棧欄中單擊放大鏡圖標,然后在方法棧對話框中查看后端鏈路上哪部分內容耗時較長,繼而定位問題。
  6. 在左側導航欄選擇應用 > 訪問速度。
  7. 訪問速度頁面的慢頁面會話追蹤(TOP20)區域,單擊目標慢會話的頁面名稱。
    慢頁面會話追蹤
    會話追蹤頁面的頁面資源加載瀑布圖區域,您可以查看導致頁面打開緩慢的資源詳情。

更多信息