chrome 浏览器的开发工具 network

image.png

主要看下这里的Finish,DOMLoadedLoad的区别

DOMLoadedLoad

<html>
<script src=1.js></script>
<script src=2.js></script>
<img src=1.jpg />
<script src=3.js></script>
</html>

看下Finish

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 浏览器里调试

关于自动化

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 性能测试

image.png
image.png

扩展阅读


↙↙↙阅读原文可查看相关链接,并与作者交流