定位、排查網頁載入過慢問題的原因有諸多痛點。針對這類問題,ARMS前端監控的慢會話追蹤功能提供頁面靜態資源載入的效能瀑布圖,可深入定位頁面資源載入情況,全方位地診斷故障根源,從而快速排除故障。
問題描述
網頁載入較慢是經常出現且前端非常關注的問題之一。定位、排查解決這類問題的痛點如下:
- 複現困難
假設您的一位使用者是A,當A訪問某網頁時,該頁面會載入在A本地的瀏覽器上。由於頁面的載入耗時受地區、網路情況、瀏覽器或者電訊廠商等因素影響,排查問題時無法複現A在訪問頁面時的具體情況。
- 監控資訊缺少,無法深入排查
大部分前端監控會通過PerformanceTiming對象來擷取完整的頁面載入耗時資訊,這將缺失頁面靜態資源的載入情況,導致無法深入定位效能瓶頸。
解決方案
只需將Web端應用接入ARMS前端監控,並且在接入時開啟頁面資源上報功能,然後利用ARMS前端監控的慢會話追蹤功能,即可協助您快速定位效能瓶頸。
步驟一:接入ARMS前端監控
ARMS前端監控SDK預設不上報頁面載入的靜態資源資訊。若使用慢會話追蹤功能對慢頁面載入問題快速定位,則需擷取頁面載入的靜態資源資訊。
步驟二:定位故障
您可以通過兩種不同入口的方式來定位故障,兩種方式均能達到使用慢會話追蹤功能診斷網頁效能問題的目的。
方式一:從訪問速度開始排查
- 登入ARMS控制台,在左側導覽列選擇 。
- 在前端列表頁面頂部選擇目標地區,然後單擊目標應用程式名稱。
- 在左側導覽列選擇
訪問速度頁面的詳情介紹,請參見頁面訪問速度。在本樣本中,該頁面效能較差,在11:00時的頁面完全載入時間達到36.7 s。
。 - 在訪問速度頁面上,拖動右側的捲軸至慢頁面會話追蹤(TOP20)地區。
該地區會列出該頁面在指定時間段內載入最慢的20個會話。
在本樣本中,您可以看到在11:36:46的頁面載入時間為36.72 s,可以判斷這次訪問是導致頁面載入時間驟增的原因。
- 在慢頁面會話追蹤(TOP20)地區的頁面列中單擊目標頁面名稱。
進入慢載入詳情頁面。
- 根據慢載入詳情頁面的資訊定位故障原因,進而排除故障。
慢載入詳情頁面頂部的頁面資訊地區展示了本次訪問的用戶端IP地址、瀏覽器、作業系統等資訊,協助您確認故障原因。
慢載入詳情頁面的頁面資源載入瀑布圖地區展示了頁面靜態資源載入的瀑布圖,協助您快速定位資源載入的效能瓶頸。
慢載入詳情頁面的詳細資料,請參見慢會話追蹤。
方式二:從會話追蹤開始排查
- 登入ARMS控制台,在左側導覽列選擇 。
- 在前端列表頁面頂部選擇目標地區,然後單擊目標應用程式名稱。
- 在左側導覽列選擇
會話列表地區展示了該應用下的所有會話,您可以按照使用者名稱、使用者ID、會話ID等條件進行過濾,快速發現耗時較長的會話資訊。
。 - 在會話列表地區,單擊目標會話名稱。然後根據會話追蹤詳情頁面的資訊定位故障原因,進而排除故障。
會話追蹤頁面的詳細資料,請參見慢會話追蹤。
操作至此,已使用慢會話追蹤功能完成問題排查,該功能可以協助你複現使用者在訪問頁面時的頁面資源載入情況,快速定位效能瓶頸問題。
相關操作
為避免在出現問題後被動診斷錯誤原因,您還可以使用ARMS的警示功能針對一個介面或全部介面建立警示,即可在出現問題的第一時間向營運團隊發送通知。
建立警示操作步驟,請參見前端監控警示規則(新版)。