chrome瀏覽器的開發工具network
image.png
主要看下這里的Finish
,DOMLoaded
和Load
的區別
DOMLoaded
和Load
-
DOMContentLoaded
和Load
分別對應 頁面DOMContentLoaded
和Load
事件觸發的時間點 -
DOMContentLoaded
:DOM
樹構建完成。即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);
}
- 手機連接電腦后,打開chrome,輸入chrome://inspect/#devices
-
然后就可以進行調試了
image.png
image.png
image.png