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
网友评论