網頁前端頁面載入效能測試各工具可行性方案分析

2021-09-07 03:20:28 字數 1954 閱讀 2224

1 .webbrowser(核心ie10)和ie10瀏覽器的比較:

webbrowser的測試方法為,先執行清除瀏覽器快取,從開始導航開始計時,documentcompleted時間將2次觸發,取最後一次的時間,按照documentcompleted解釋,這個時間相當於全部元素loa完畢,測試結果如下:

接下來開啟ie工具測試,先執行清除瀏覽器快取測試結果如下

結論:經過多次測試,可以看到,webbrowser和ie工具測試的結果相當接近!

webbrowser 的documentcompleted時間即為ie工具的全部元素載入時間

2 http抓包工具fiddler結果測試:

結束時間

抓包ie10結果如下:

開始14:15:59:6241

結束14:16:00:1082 兩者間隔為481毫秒。

抓包webbrowser結果如下:

開始14:18:37:4179

結束14:18:37:8689

兩者間隔451毫秒

結論:1.ie10和webbrowser網路載入時間基本相同,

2 問題:fiddler抓包的資料大於瀏覽器的計算時間?這個是不是fiddler資料有問題?

2.火狐的firebug工具測試:

先清除瀏覽器快取:

結論:怎麼測試都在2000毫秒以上,搞不懂為什麼比ie慢那麼多?直眼睛都看得出來比ie慢!

3. berserkjs測試

這個不知道快取是怎麼搞,直接測試吧

可以看到這個間隔時間為246秒,首屏時間為:1894毫秒

這個時間跟ie核心的差不多

fiddler測試抓包:

14:34:09:7921

14:34:10:2181

可以發現fiddler抓包時間大於berserkjs的測試時間!

然後我又使用ie10做了個測試,關閉fiddler用webbrowser測試時間為186毫秒

開啟fiddler用webbrowser測試時間居然高達460毫秒!

4測試結論:

1. 瀏覽器對測試資料影響很大,3種種核心,最快的為webkit 246,也有可能這個東西沒有外圍的程式直接使用核心的關係,他是最快的,ie10次之為400,火狐最慢達到2000多,但是為什麼火狐的速度那麼慢,這個未能有答案。

2. 查詢各種資料,發現類似fiddler這種工具使用的原理是,啟動了fiddler,程式將會把自己作為乙個微軟網際網路服務的系統**。作為系統**,所有的來自微軟網際網路服務(wininet)的http請求再到達目標web伺服器的之前都會經過fiddle,同樣的,所有的http響應都會在返回客戶端之前流經fiddler,那麼這就能解釋為什麼開啟fiddler後速度變慢了!

這個就是經常說的網路劫持,類似的工具還有httpwach,httpanalyzer等,由此可見這種原理的測試資料會導致資料偏離實際,不建議使用!

3. 不能使用fiddler這種原理,由於webbrowser有限的功能和擴充套件,基本上不能取到har裡面的資料,這個方案將不可行!

4. 建議:使用berserkjs方案,目前ip未能解決,需想辦法解決此問題!

web前端頁面效能測試

特別是使用者對系統要求越來越高,除了要求功能完備,對介面的美觀 易用性也提出了更高的要求,越炫的頁面也就意味著頁面中要包含更多的指令碼 樣式表 和flash,頁面的資料量也就越大,這對web系統的效能提出了極大的挑戰。減少請求和響應的往返次數 http快取是最好的減少客戶端伺服器端往返次數的辦法。快...

網頁前端效能測試 Lighthouse的使用

lighthouse 幫助 是乙個google開源的自動化工具,它的主要功能就是檢測 的效能,分析網路應用和網頁,收集現代效能指標並提供對開發人員最佳實踐的意見。它能夠針對性能 可訪問性 漸進式 web 應用等進行審核。由於chrome開發著工具中audits面板配置好引數,點選 run audit...

前端效能優化 載入頁面和靜態資源

前端效能優化主要從兩個方面進行 1.載入頁面和靜態資源 2.頁面渲染 載入頁面和靜態資源主要可以從三個角度進行 靜態資源的合併 壓縮 靜態資源快取 css img 使用cdn讓靜態資源載入更快 我們乙個乙個仔細展開說。靜態資源的合併和壓縮能夠減少http請求的數量和請求資源的大小。可以使用webpa...