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 时间一致:
在Console
输入 window.performance.getEntries()
,可以看到页面上所有的资源请求,不统计 404 的请求
有 65 个请求,里面有请求的哪个节点耗时,和 url,查看第一个请求duration
其实就是页面的load
时间
想过把这所有资源的duration
相加应该就能得到Finish
时间?,经过测试,当然是不行的,第一个请求duration
虽然是页面的load
时间,但是它可能包含了页面上的非异步的请求,同时也包含了css
,img
,dom
的加载时间,因此相加统计肯定会比Finish
大
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)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
MtcWebView.setWebContentsDebuggingEnabled(true);
}