一、客戶投訴不斷，本地卻無法重現？
頁面加載較慢是用戶經常會反饋的問題，也是前端非常關註的問題之一。但定位、排查解決這類問題就通常會花費非常多的時間，主要原因如下：

1. 頁面是在用戶端的瀏覽器上加載執行，復現困難

頁面上線前，開發同學都會進行測試，在測試環境下頁面加載一般都是正常的才會正式上線。用戶在訪問頁面時，頁面的加載是在用戶端的瀏覽器上進行的，由於頁面的加載耗時與地域、網絡情況、瀏覽器或者運營商等有關系，想知道用戶在訪問頁面時的具體情況，復現是非常困難的。

2. 監控信息缺少，導致無法深入排查

大部分前端監控會通過PerformanceTiming對象，獲取完整的頁面加載耗時信息，但這類監控就缺失了頁面靜態資源的加載情況，無法直接復現現場，從而無法深入定位性能瓶頸。

為了方便用戶更快地定位性能瓶頸，阿裏雲ARMS前端監控推出一新功能: 會話追蹤，提供頁面靜態資源加載的性能瀑布圖，根據頁面性能數據可深入定位頁面資源加載情況。

二、阿裏雲ARMS前端監控-會話追蹤幫助你快速定位問題
在阿裏雲ARMS前端監控SDK上將sendResource配置為true，重新部署應用後，在頁面onload時會上報當前頁面加載的靜態資源信息。從而在阿裏雲前端監控平臺即可以對慢頁面加載問題快速進行定位。

SDK配置

在阿裏雲ARMS前端監控SDK部分，默認是不上報頁面加載的靜態資源信息的，如果想獲取頁面加載的靜態資源信息，只需在SDK的config部分將sendResource配置為true，重新部署後，就可以上報相關信息。具體配置如下：

註意：靜態資源加載信息的上報是在頁面onload時會觸發，上報信息量較大，如果對於頁面性能要求很高的應用，可以不開啟該配置。

三、問題排查過程

1. 發現問題

進入訪問速度菜單後，發現頁面的性能較差，11點鐘的頁面完全加載時間達到35s，如下：

2. 慢頁面會話追蹤

在慢頁面會話追蹤模塊，提供該頁面在指定時間段內加載較慢的TOP20，這樣可以快速發現哪些會話加載較慢，如下圖所示。

其中在在模塊有7次會話訪問的頁面加載時間在7s以上，點擊對應的頁面，可以直接進入到會話詳情頁面，從而直觀查看頁面靜態資源加載的瀑布圖。

通過頁面資源加載的瀑布圖，可以快速定位到資源加載的性能瓶頸，同時可以查看本次訪問的客戶端IP地址、瀏覽器、操作系統等UA信息，從而進一步確認是由於網絡原因還是其他原因導致的，針對性進行相應的優化。

3. 其他發現問題入口

會話追蹤

也可以進入“會話追蹤”菜單，可以看到該應用下的會話列表。會話列表中會根據頁面完全加載時間排序，展示TOP100，幫助用戶可以快速發現耗時較長的會話信息。同時支持按照頁面、會話Id、瀏覽器、瀏覽器版本號進行過濾，展示相關的會話信息。點擊操作後，是該會話的頁面資源加載詳情。

訪問明細

如果當前會話列表中無法找到你要排查的會話信息，可以通過訪問明細查找到相應的日誌詳細信息，在param中找到對應的sid即會話Id，然後在會話列表中查找相應的會話Id，即可以定位到想排查的會話信息。
例如：在已知用戶的客戶端IP的情況下，想定位相應的會話信息，即可以在訪問明細中，通過t=res and 117.136.32.110 進行搜索，找到對應的會話Id。

根據查找到的會話Id, 就可以在會話列表中進行過濾，定位到具體的會話內容。

使用入口指南

1、進入訪問速度菜單，如果發現頁面性能較差，可以在"慢頁面會話追蹤Top20"中查看訪問較慢的會話情況

點擊詳情後，可以查看具體的頁面資源加載瀑布圖
如果Top20不滿足，可以點擊"更多"，從而進入"會話列表"
2、進入會話追蹤菜單，展示的是TOP100的會話列表信息，根據頁面完全加載時間從高到底排序，排查頁面資源加載情況。

至此，慢頁面會話追蹤功能及使用方法介紹完成。該功能可以幫助你復現用戶在訪問頁面時的頁面資源加載情況，快速定位性能瓶頸問題。

原文鏈接

本文為雲棲社區原創內容，未經允許不得轉載。

如何使用阿裏雲ARMS輕松重現用戶瀏覽器問題