問題描述

網(wǎng)頁(yè)加載較慢是經(jīng)常出現(xiàn)且前端非常關(guān)注的問題之一。定位、排查解決這類問題的難點(diǎn)如下：

• 復(fù)現(xiàn)困難

  假設(shè)您的一位用戶是A，當(dāng)A訪問某網(wǎng)頁(yè)時(shí)，該頁(yè)面會(huì)加載在A本地的瀏覽器上。由于頁(yè)面的加載耗時(shí)受地域、網(wǎng)絡(luò)情況、瀏覽器或者運(yùn)營(yíng)商等因素影響，排查問題時(shí)無(wú)法復(fù)現(xiàn)A在訪問頁(yè)面時(shí)的具體情況。

• 監(jiān)控信息缺少，無(wú)法深入排查

  大部分前端監(jiān)控會(huì)通過PerformanceTiming對(duì)象來(lái)獲取完整的頁(yè)面加載耗時(shí)信息，這將缺失頁(yè)面靜態(tài)資源的加載情況，導(dǎo)致無(wú)法深入定位性能瓶頸。

解決方案

只需將Web端應(yīng)用接入ARMS前端監(jiān)控，并且在接入時(shí)開啟頁(yè)面資源上報(bào)功能，然后利用ARMS前端監(jiān)控的慢會(huì)話追蹤功能，即可幫助您快速定位性能瓶頸。

步驟一：接入ARMS前端監(jiān)控

ARMS前端監(jiān)控SDK默認(rèn)不上報(bào)頁(yè)面加載的靜態(tài)資源信息。若使用慢會(huì)話追蹤功能對(duì)慢頁(yè)面加載問題快速定位，則需獲取頁(yè)面加載的靜態(tài)資源信息。

步驟二：定位故障

您可以通過兩種不同入口的方式來(lái)定位故障，兩種方式均能達(dá)到使用慢會(huì)話追蹤功能診斷網(wǎng)頁(yè)性能問題的目的。

方式一：從訪問速度開始排查

1. 登錄ARMS控制臺(tái)，在左側(cè)導(dǎo)航欄選擇前端監(jiān)控 > 前端列表。
2. 在前端列表頁(yè)面頂部選擇目標(biāo)地域，然后單擊目標(biāo)應(yīng)用名稱。

3. 在左側(cè)導(dǎo)航欄選擇應(yīng)用 > 訪問速度。

   訪問速度頁(yè)面的詳情介紹，請(qǐng)參見頁(yè)面訪問速度。在本示例中，該頁(yè)面性能較差，在11:00時(shí)的頁(yè)面完全加載時(shí)間達(dá)到36.7 s。

   

4. 在訪問速度頁(yè)面上，拖動(dòng)右側(cè)的滾動(dòng)條至慢頁(yè)面會(huì)話追蹤（TOP20）區(qū)域。

   該區(qū)域會(huì)列出該頁(yè)面在指定時(shí)間段內(nèi)加載最慢的20個(gè)會(huì)話。

   在本示例中，您可以看到在11:36:46的頁(yè)面加載時(shí)間為36.72 s，可以判斷這次訪問是導(dǎo)致頁(yè)面加載時(shí)間驟增的原因。

   

5. 在慢頁(yè)面會(huì)話追蹤（TOP20）區(qū)域的頁(yè)面列中單擊目標(biāo)頁(yè)面名稱。

   進(jìn)入慢加載詳情頁(yè)面。

6. 根據(jù)慢加載詳情頁(yè)面的信息定位故障原因，進(jìn)而排除故障。

   慢加載詳情頁(yè)面頂部的頁(yè)面信息區(qū)域展示了本次訪問的客戶端IP地址、瀏覽器、操作系統(tǒng)等信息，幫助您確認(rèn)故障原因。

   

   慢加載詳情頁(yè)面的頁(yè)面資源加載瀑布圖區(qū)域展示了頁(yè)面靜態(tài)資源加載的瀑布圖，幫助您快速定位資源加載的性能瓶頸。

   

   慢加載詳情頁(yè)面的詳細(xì)信息，請(qǐng)參見慢會(huì)話追蹤。

方式二：從會(huì)話追蹤開始排查

1. 登錄ARMS控制臺(tái)，在左側(cè)導(dǎo)航欄選擇前端監(jiān)控 > 前端列表。
2. 在前端列表頁(yè)面頂部選擇目標(biāo)地域，然后單擊目標(biāo)應(yīng)用名稱。

3. 在左側(cè)導(dǎo)航欄選擇應(yīng)用 > 會(huì)話追蹤。

   會(huì)話列表區(qū)域展示了該應(yīng)用下的所有會(huì)話，您可以按照用戶名、用戶ID、會(huì)話ID等條件進(jìn)行過濾，快速發(fā)現(xiàn)耗時(shí)較長(zhǎng)的會(huì)話信息。

4. 在會(huì)話列表區(qū)域，單擊目標(biāo)會(huì)話名稱。然后根據(jù)會(huì)話追蹤詳情頁(yè)面的信息定位故障原因，進(jìn)而排除故障。

   會(huì)話追蹤頁(yè)面的詳細(xì)信息，請(qǐng)參見慢會(huì)話追蹤。

操作至此，已使用慢會(huì)話追蹤功能完成問題排查，該功能可以幫助您復(fù)現(xiàn)用戶在訪問頁(yè)面時(shí)的頁(yè)面資源加載情況，快速定位性能瓶頸問題。

相關(guān)操作

為避免在出現(xiàn)問題后被動(dòng)診斷錯(cuò)誤原因，您還可以使用ARMS的報(bào)警功能針對(duì)一個(gè)接口或全部接口創(chuàng)建報(bào)警，即可在出現(xiàn)問題的第一時(shí)間向運(yùn)維團(tuán)隊(duì)發(fā)送通知。

創(chuàng)建報(bào)警操作步驟，請(qǐng)參見前端監(jiān)控告警規(guī)則（新版）。

更多信息

• 頁(yè)面訪問速度

• 慢會(huì)話追蹤