web 與移動端 h5 頁面加載時間分析

chrome瀏覽器的開發工具network

image.png

主要看下這里的Finish,DOMLoadedLoad的區別

DOMLoadedLoad

  • DOMContentLoadedLoad 分別對應 頁面 DOMContentLoadedLoad 事件觸發的時間點
  • DOMContentLoadedDOM樹構建完成。即HTML頁面由上向下解析HTML結構到末尾封閉標簽</html>
  • Load:頁面加載完畢。 DOM樹構建完成后,繼續加載html/css 中的圖片資源等外部資源,加載完成后視為頁面加載完畢。
  • DOMContentLoaded 會比 Load 時間小,兩者時間差大致等于外部資源加載的時間。
    看看下面這個例子:
<html>
<script src=1.js></script>
<script src=2.js></script>
<img src=1.jpg />
<script src=3.js></script>
</html>
  • 3.js 執行(不包括異步部分)后,后面的html 才能允許渲染, DOMContentLoaded 應該是指 </html> 最后一個字節都被渲染出來后的時間 (onDocumentChange 狀態變成 ready )。而 onLoad 的觸發除了dom還包括所有依賴元素,上例中就是要等 1.jpg 加載完成(或出錯)后才能觸發

看下Finish

  • Chrome devtools中的Finish時間似乎包括頁面上的異步加載(非阻塞)對象/元素,這些對象/元素可能會在頁面的onload事件觸發后繼續下載。
  • 一般來說,網站的響應時間意味著Load時間,因為用戶可以更容易地感知到這一點,此時用戶可以看到瀏覽器已完成工作并且頁面已準備就緒。
  • 在某些情況下,似乎Finish永遠不會停止并繼續增加,因此它可能不是對網頁響應時間的最佳評估。
  • 經過測試會出現會出現Finish 的時間比 Load 大也有可能小,引用于這篇文章

Finish 時間與DOMContentLoaded 和 Load 并無直接關系。
Finish 時間是頁面上所有 http 請求發送到響應完成的時間,HTTP1.0/1.1 協議限定,單個域名的請求并發量是 6 個,即Finish是所有請求(不只是XHR請求,還包括DOC,img,js,css等資源的請求)在并發量為6的限制下完成的時間。
Finish 的時間比 Load 大,意味著頁面有相當部分的請求量,
Finish 的時間比 Load 小,意味著頁面請求量很少,如果頁面是只有一個 html文檔請求的靜態頁面,Finish時間基本就等于HTML文檔請求的時間
頁面發送請求和頁面解析文檔結構,分屬兩個不同的線程,

實踐列子

  • 看看官網的例子
import PyChromeDevTools
import time
import os
os.chdir(r"C:\Users\Administrator\AppData\Local\Google\Chrome\Application")
cmd = "chrome.exe --remote-debugging-port=9222"
os.popen(cmd)
chrome = PyChromeDevTools.ChromeInterface()
chrome.Network.enable()
chrome.Page.enable()
chrome.Page.reload(ignoreCache=True) # 不帶緩存
start_time=time.time()
chrome.Page.navigate(url="http://www.baidu.com/")
chrome.wait_event("Page.loadEventFired", timeout=60)
end_time = time.time()
print("Page Loading Time:", end_time-start_time)
chrome.close()

得到結果為:

Page Loading Time: 1.702894687652588
Page Loading Time: 1.658094882965088
Page Loading Time: 1.5752882957458496

在chrome瀏覽器的console下調試,基本上和load時間一致:


image.png

在chrome 瀏覽器里調試

  • Console輸入 window.performance.getEntries(),可以看到頁面上所有的資源請求,不統計404的請求

    image.png

  • 有65個請求,里面有請求的哪個節點耗時,和url,查看第一個請求duration其實就是頁面的load時間

    image.png

    image.png

  • 想過把這所有資源的duration相加應該就能得到Finish時間?,經過測試,當然是不行的,第一個請求duration雖然是頁面的load時間,但是它可能包含了頁面上的非異步的請求,同時也包含了css,img,dom的加載時間,因此相加統計肯定會被Finish要大

關于自動化

  • 可以結合selenium來使用
from selenium import webdriver
import os
PATH = lambda p: os.path.abspath(
    os.path.join(os.path.dirname(__file__), p)
)
chrome_driver = PATH("exe/chromedriver.exe")
os.environ["webdriver.chrome.driver"] = chrome_driver
driver = webdriver.Chrome(chrome_driver)
driver.get("http://www.baidu.com")
data = driver.execute_script("return window.performance.getEntries();")
print(data)

移動端h5性能測試

  • 打開手機usb調試
  • 如果是想調試混合app的webview,請打開:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
MtcWebView.setWebContentsDebuggingEnabled(true);
}
image.png

image.png

擴展閱讀

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,627評論 1 45
  • ??JavaScript 與 HTML 之間的交互是通過事件實現的。 ??事件,就是文檔或瀏覽器窗口中發生的一些特...
    霜天曉閱讀 3,526評論 1 11
  • 一般情況下,如果網頁加載時間超過5s,用戶就會感覺頁面比較卡,遇到耐心不好的用戶,肯定就直接關閉走人了,所以加載的...
    leyu閱讀 36,154評論 1 17
  • 1 至少在《紅樓夢》第二回的那個時段,賈雨村的形象還沒有那么讓人討厭。 他先是完成了從寒門學子到官場新貴的階層飛躍...
    知月閱讀 711評論 2 4
  • 志同道合發生在淺嘗輒止慢熟于心
    魚骨大頭針閱讀 129評論 0 0