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
