前端测试 web 与移动端 h5 页面加载时间分析
chrome 浏览器的开发工具 network
主要看下这里的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 时间一致：
在 chrome 浏览器里调试
在
Console输入window.performance.getEntries(),可以看到页面上所有的资源请求，不统计 404 的请求
有 65 个请求，里面有请求的哪个节点耗时，和 url，查看第一个请求
duration其实就是页面的load时间
想过把这所有资源的
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
- 然后就可以进行调试了
扩展阅读
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
使用 Google 的 WebPageTest 会比较简单和更多详细的数据
楼主 这个命令启动的谷歌浏览器为什么无法运行你上面的官网例子里面后面的代码 一直卡住，但是我手动打开的 chrome 可以运行
import os
os.chdir(r"C:\Program Files\Google\Chrome\Application")
cmd = "chrome --remote-debugging-port=9222"
os.popen(cmd)