施坤的博客
0%

web 与移动端 h5 页面加载时间分析

发表于 分类于 阅读次数： Valine：

chrome浏览器的开发工具network

image-20220427160911385

Finish,DOMLoaded和Load的区别

DOMLoaded和Load

  • DOMContentLoaded 和 Load 分别对应 页面 DOMContentLoaded 和 Load 事件触发的时间点
  • DOMContentLoaded：DOM树构建完成。即HTML页面由上向下解析HTML结构到末尾封闭标签</html> 。
  • Load:页面加载完毕。 DOM树构建完成后，继续加载html/css 中的图片资源等外部资源，加载完成后视为页面加载完毕。
  • DOMContentLoaded 会比 Load 时间小，两者时间差大致等于外部资源加载的时间。
    看看下面这个例子：
1
2
3
4
5
6
<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 应该是指 最后一个字节都被渲染出来后的时间 (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文档请求的时间
    页面发送请求和页面解析文档结构，分属两个不同的线程，

实践列子

  • 看看官网的例子
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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()

得到结果为：

1
2
3
Page Loading Time: 1.702894687652588
Page Loading Time: 1.658094882965088
Page Loading Time: 1.5752882957458496

在chrome浏览器的console下调试，基本上和load时间一致：
image-20220427160947950

在chrome 浏览器里调试

  • 在Console输入 window.performance.getEntries(),可以看到页面上所有的资源请求，不统计404的请求
    image-20220427161012309
  • 有65个请求，里面有请求的哪个节点耗时，和url，查看第一个请求duration其实就是页面的load时间

image-20220427161048311

image-20220427161108589

  • 想过把这所有资源的duration相加应该就能得到Finish时间?,经过测试，当然是不行的，第一个请求duration虽然是页面的load时间，但是它可能包含了页面上的非异步的请求，同时也包含了css,img,dom的加载时间,因此相加统计肯定会被Finish要大

关于自动化

  • 可以结合selenium来使用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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,请打开：
    1
    2
    3
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    MtcWebView.setWebContentsDebuggingEnabled(true);
    }
  • 手机连接电脑后，打开chrome,输入chrome://inspect/#devices
  • 然后就可以进行调试了

image-20220427161218594

image-20220427161238398

image-20220427161255522

扩展阅读