隨著移動互聯網的發展，用戶對產品的使用體驗要求越來越高。APP內的H5作為重要載體，靈活，輕量，在移動端的應用非常廣泛，是一個非常核心的用戶體驗指標。但對比App，H5的性能表現還是遜色一籌，比如頁面打開往往會出現白屏，加載慢等問題。
針對這些H5具體使用時的各類問題，友盟+U-APM應用性能監控平臺上線了「H5頁面分析」功能。針對APP內H5頁面常見的用戶感知、加載性能、慢加載三大問題，實時監控應用中H5頁面的性能情況，即時幫助開發者應對H5頁面的各類性能狀況。
01 用戶感知
從C端用戶角度， 用戶會向APP開發者投訴頁面加載過慢，反應速度很慢，這類偏向感知類的反饋，但這個反饋很難整體進行衡量和判斷，鎖定到底是哪里出現問題、異常到底指向哪里角度去進行判斷。
因此頁面上提供首屏時間、首次內容繪制時間、頁面可交互時間這3個用戶可視性性能指標便于開發者了解當前頁面的加載情況；
指標定義
首屏時間（FP）：First Paint，從打開頁面到首個像素渲染到頁面的時長
首次內容繪制時間（FCP）：First Contentful Paint，首次繪制完成DOM內容的時長，內容包括文本、圖片（包含背景圖）、非白色的 canvas 或 SVG，也包括帶有正在加載中的 Web 字體的文本
頁面可交互時間（TTI）： Time to interactive，從頁面加載開始到頁面處于完全可交互狀態的時長。
1秒快開比：首屏完全加載時長≤1s的PV占比
2秒快開比：首屏完全加載時長≤2s的PV占比
5秒慢開比：首屏完全加載時長>5s的PV占比
通過以上指標開發者可以快速掌握全局加載情況，感知加載時間較長的用戶占比情況； 還可通過提供的樣本分布掌握用戶對于頁面加載的容忍情況。維度分布、指標列表多個維度。
整體篩選控件支持篩選時間范圍、屬性維度、頁面、高級功能。啟動頁面的篩選支持按照域名進行聚合，如果需要篩選某個URL，請先選擇對應的域名，再在域名下篩選URL。
樣本分布和維度分布多個指標可以查看。樣本分布按照各個維度下求指標的平均值，支持Top5和明細的查看。
指標列表展示所有指標，支持導出，包含50%、90%、95%分位值。
02 加載性能
在了解完C端對于頁面整體的感知情況后，開發者可能會關注到底哪里的加載慢了影響了整體的感知，此時就有了“加載性能”這個模塊的設計；
在這個模塊中可以為開發者提供頁面加載的完整生命周期，并能能夠根據不同階段了解各環節的加載耗時。
整體趨勢：洞察頁面中不同生命周期的平均時長和維度分布
加載性能包含整體趨勢、平均時長、指標列表、樣本分布和維度分布等指標。整體趨勢可以查看加載指標的平均值、50%、90%、95%分位值。
分頁面統計：洞察App中不同頁面在不同階段的加載耗時
03 慢加載
在了解了整體感知和頁面各生命周期中階段的耗時后也可從慢加載角度定位APP的請求較慢的情況。
慢加載定義： 可自行設置慢請求的閾值，如果請求時長大于設置的閾值，則為一次慢請求。 頁面完全加載時長超過慢加載閾值的被視為慢啟動，默認為3秒，設定后頁面即刻刷新
URL列表中包含請求URL的列表，URL以host+path進行聚合，點擊URL后可以查看到在所有篩選的時間和條件下每次慢請求的ID list。
點擊URL行旁邊的維度分布可以展開整體的維度分布圖，展示了這個URL按照Host+Path聚合后，在每個維度下面的數量分布。
點擊請求ID行右邊的加載時序圖，即可展開這次慢請求的詳情，其中展示了本次請求的詳細設備信息以及頁面加載的完整生命周期。通過完整的加載時序圖可以了解單請求中哪個環節出現問題，快速定位。
以上功能可通過U-APM應用性能監控平臺新上線的H5頁面分析一一實現，開發者只需要額外集成JS SDK，按照集成文檔操作就可完成！
04 采樣率
H5分析統一采樣率為5%，此采樣率按照設備的啟動定義，即為每次啟動有5%的可能性被采樣。如果開發者是Pro用戶需要做采樣率調整，U-APM團隊會協助做相應支持。
關于U-APM 應用性能監控平臺
截止目前，U-APM已支持服務國內各領域多家頭部客戶，如七貓免費小說、獵豹清理大師、車來了、江南百景圖等。未來，U-APM會繼續秉承為開發者提供好工具好服務的理念，助力應用穩定性與性能監控，有效提升開發者發現問題、定位問題的效率，共同守護用戶體驗。
