日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

前端性能指標--首屏時間統計

來源: 責編: 時間:2023-11-28 09:37:16 240觀看
導讀Part 01 白屏和首屏時間 - 白屏:從用戶請求頁面開始到顯示第一個字符的時間。中間包括DNS查詢、建立TCP鏈接、發送首個HTTP請求、返回HTML文檔、HTML文檔head解析完畢。通常認為瀏覽器開始渲染標簽或者解析完標簽的時

Crg28資訊網——每日最新資訊28at.com

Part 01 白屏和首屏時間 

- 白屏:從用戶請求頁面開始到顯示第一個字符的時間。中間包括DNS查詢、建立TCP鏈接、發送首個HTTP請求、返回HTML文檔、HTML文檔head解析完畢。通常認為瀏覽器開始渲染標簽或者解析完標簽的時刻就是頁面白屏結束的時間點。Crg28資訊網——每日最新資訊28at.com

- 首屏:指用戶打開網站開始,到瀏覽器首屏內容渲染完成的時間,對于用戶體驗來說,首屏時間是用戶對一個網站的重要體驗因素。Crg28資訊網——每日最新資訊28at.com

Part 02 PerformanceTiming 

performance.timing記錄了用于分析頁面整體性能指標的關鍵時間點,包含網絡、解析等一系列的時間數據。最好在頁面完全加載完成之后再使用,因為很多值必須在頁面完全加載之后才能得到。最簡單的辦法是在window.onload(vm.$nextTick 或 react hooks useEffect)事件中讀取各種數據。Crg28資訊網——每日最新資訊28at.com

在瀏覽器控制臺,console輸入performance可以查看到performance.timing相關時間節點:Crg28資訊網——每日最新資訊28at.com

Crg28資訊網——每日最新資訊28at.com

圖1 performance.timing參數介紹Crg28資訊網——每日最新資訊28at.com

通過PerformanceTiming不僅可以幫助我們省去繁瑣的手動打點操作,還可以幫助我們獲取很多其他數據,對于整個時間節點的對應關系:下圖顯示了PerformanceTiming中定義的所有時間戳屬性。Crg28資訊網——每日最新資訊28at.com

Crg28資訊網——每日最新資訊28at.com

圖2 performance.timing參數說明Crg28資訊網——每日最新資訊28at.com

比較有用的頁面性能數據大概包括如下幾個:Crg28資訊網——每日最新資訊28at.com

重定向耗時:redirectEnd - redirectStartCrg28資訊網——每日最新資訊28at.com

DNS查詢耗時:domainLookupEnd - domainLookupStartCrg28資訊網——每日最新資訊28at.com

TCP鏈接耗時:connectEnd - connectStartCrg28資訊網——每日最新資訊28at.com

HTTP請求耗時:responseEnd - responseStartCrg28資訊網——每日最新資訊28at.com

解析dom樹耗時:domComplete - domInteractiveCrg28資訊網——每日最新資訊28at.com

白屏時間:responseStart - navigationStartCrg28資訊網——每日最新資訊28at.com

DOM ready時間:domContentLoadedEventEnd - navigationStartCrg28資訊網——每日最新資訊28at.com

onload時間:loadEventEnd – navigationStartCrg28資訊網——每日最新資訊28at.com

Part 03 MutationObserver API 

MutationObserver API讓我們能監聽dom樹變化,在首屏的加載中,會涉及到dom的增加、修改、刪除,所以會觸發多次MutationObserver。Crg28資訊網——每日最新資訊28at.com

1)利用MutationObserver監聽document對象,每當dom變化時觸發回調函數;Crg28資訊網——每日最新資訊28at.com

2)判斷監聽的dom是否在首屏內,如果在首屏內,將該dom放到指定的數組中,記錄下當前dom變化的時間點;Crg28資訊網——每日最新資訊28at.com

3)在MutationObserver的callback函數中,通過防抖函數,監聽document.readyState狀態的變化;Crg28資訊網——每日最新資訊28at.com

4)當document.readyState === 'complete',停止定時器和 取消對document的監聽;Crg28資訊網——每日最新資訊28at.com

5)遍歷存放dom的數組,找出最后變化節點的時間,就是首屏加載完成的時間。Crg28資訊網——每日最新資訊28at.com

監聽container外層容器的變化,當觸發回調函數時,判斷對應的事件類型以及新增加的子dom是否是首屏展示的dom節點。Crg28資訊網——每日最新資訊28at.com

Crg28資訊網——每日最新資訊28at.com

盡管現在的MutationObserver在移動端兼容性比較好,但為了更好的兼容,我們可以另外引入MutationEvents API。Crg28資訊網——每日最新資訊28at.com

Part 04 webview里H5頁面首屏時間

Crg28資訊網——每日最新資訊28at.com

4.1 WebView初始化階段

該階段包括幾個主要步驟:Crg28資訊網——每日最新資訊28at.com

(1)開始解析Url(Url中可能包含${}需要解析的字段)Crg28資訊網——每日最新資訊28at.com

(2)完成解析UrlCrg28資訊網——每日最新資訊28at.com

(3)開始校驗Url是否可以打開Crg28資訊網——每日最新資訊28at.com

(4)結束校驗UrlCrg28資訊網——每日最新資訊28at.com

(5)開始加載Url到webview容器Crg28資訊網——每日最新資訊28at.com

和家親app jsbridge提供了getPerformInfo方法可以幫助我們獲取WebView性能數據:Crg28資訊網——每日最新資訊28at.com

WebViewUrlLoaded WebView加載url時間:startLoadUrl(開始加載Url到webview容器) - startProcessUrl(開始解析Url);Crg28資訊網——每日最新資訊28at.com

4.2 HTTP請求服務階段

該階段包括幾個主要步驟:Crg28資訊網——每日最新資訊28at.com

(1) DNS查詢Crg28資訊網——每日最新資訊28at.com

(2) 等待 TCP 隊列Crg28資訊網——每日最新資訊28at.com

(3) TCP鏈接Crg28資訊網——每日最新資訊28at.com

(4) 發起http請求和響應Crg28資訊網——每日最新資訊28at.com

(5) 服務器端處理HTTP請求,服務器端處理HTTP請求,瀏覽器得到html代碼Crg28資訊網——每日最新資訊28at.com

(6) 開始head解析Crg28資訊網——每日最新資訊28at.com

該階段的時間從webview容器開始加載Url開始到完成head解析,可以使用window.performance.timing.responseStart - startLoadUrl(開始加載Url到webview容器)Crg28資訊網——每日最新資訊28at.com

4.3 靜態資源下載

該階段包括幾個主要步驟:Crg28資訊網——每日最新資訊28at.com

(1) head解析并開始請求靜態資源(如js、css、圖片等)Crg28資訊網——每日最新資訊28at.com

(2) 靜態資源下載完成Crg28資訊網——每日最新資訊28at.com

(3) 開始解析靜態資源Crg28資訊網——每日最新資訊28at.com

該階段的時間從開始請求靜態資源,到開始解析靜態資源(比如JS),我們可以在js文件開始自定義JscriptLaunch字段,并賦值給window.preformance對象,(window.PerformInfo || (window.PerformInfo = {})).JscriptLaunch = new Date().getTime(); 以便于我們統計該階段的時間:window.PerformInfo.JscriptLaunch - window.performance.timing.responseStart。Crg28資訊網——每日最新資訊28at.com

4.4 API調用和首屏dom渲染

該階段包括幾個主要步驟:Crg28資訊網——每日最新資訊28at.com

(1) 開始解析靜態資源,請求APICrg28資訊網——每日最新資訊28at.com

(2) 響應數據Crg28資訊網——每日最新資訊28at.com

(3) 下載資源并渲染domCrg28資訊網——每日最新資訊28at.com

(4) 首屏內容加載完成Crg28資訊網——每日最新資訊28at.com

利用MutationObserver監控DOM的變化,獲取首屏dom加載完成的時間,用該時間點減去window.PerformInfo.JscriptLaunch,就獲得了該階段的時間。Crg28資訊網——每日最新資訊28at.com

Part 05 數據上報

將統計到的數據以圖片打點、fetch請求或Beacon等形式進行上報,可以幫助我們后續進行分析和優化。Crg28資訊網——每日最新資訊28at.com

5.1 直接發請求上報

直接將數據通過ajax發送到后端有一個問題,就是在頁面卸載或刷新時進行上報的話,請求可能會在瀏覽器關閉或重新加載前還未發送至服務端就被瀏覽器cancel掉,導致數據上報失敗。Crg28資訊網——每日最新資訊28at.com

5.2 利用圖片上報

服務器端并不關心具體的數據上報方式,無論是請求image文件還是請求其他普通文件(JS)或者是請求接口,可以進行數據上報。Crg28資訊網——每日最新資訊28at.com

使用image有幾個優點:Crg28資訊網——每日最新資訊28at.com

圖片的src屬性并不會跨域,不會出現跨域問題;Crg28資訊網——每日最新資訊28at.com

大部分瀏覽器會延遲卸載(unload)文檔以加載圖像,可以避免第一種方法的問題;Crg28資訊網——每日最新資訊28at.com

只要在js中new出Image對象就能發起請求,不用插入dom中,可以防止阻塞頁面加載,影響用戶體驗;Crg28資訊網——每日最新資訊28at.com

相比PNG/JPG,GIF的體積最小,最適合進行上報,一般采用1*1像素的透明gif進行上報。Crg28資訊網——每日最新資訊28at.com

5.3 css定義content

通過css定義content,按鈕點擊就會上報,但是不能動態傳入一些變量。Crg28資訊網——每日最新資訊28at.com

Crg28資訊網——每日最新資訊28at.com

5.4 Beacon

Beacon可將數據異步發送至服務端,且可能保障在頁面卸載實現前發送申請(解決頁面卸載會終止請求的問題)。Crg28資訊網——每日最新資訊28at.com

Crg28資訊網——每日最新資訊28at.com

Part 06 總結

頁面首屏加載時間是個重要的性能指標,通過上面的方式對首屏時間進行統計分析,可以幫助我們有針對性的進行性能優化。同時頁面性能的提升,帶給用戶更好的產品體驗,這樣才會得到好的產品反饋,給企業帶來價值。Crg28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-34681-0.html前端性能指標--首屏時間統計

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: Javascript的閉包有哪些應用?你學會了嗎?

下一篇: 一文搞懂Go gRPC服務Handler單元測試

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 余姚市| 永平县| 廊坊市| 汉源县| 白山市| 开封市| 宜川县| 嘉荫县| 社会| 合作市| 邻水| 仪征市| 天峻县| 祥云县| 清河县| 通海县| 磐石市| 定安县| 科技| 孟津县| 上栗县| 星座| 湘西| 溧水县| 贵溪市| 贞丰县| 石泉县| 和顺县| 东港市| 铜陵市| 连平县| 涪陵区| 巩义市| 建宁县| 桃江县| 商河县| 集安市| 巫溪县| 乡宁县| 兴文县| 兴隆县|