使用JavaScript测量页面加载时序

Question

我在JavaScript中创建了一个脚本,在自动浏览器测试期间注入到我们的Ext JS应用程序中.该脚本测量在网格中加载数据所花费的时间.

具体来说,脚本轮询每个网格,查看是否存在第一行或"无数据"消息,并且一旦所有网格满足此条件,脚本将记录Date.now()和performance.timing.fetchStart之间的值. ,并将其视为页面加载的时间.

此脚本或多或少地按预期工作,但与人体测量时间(Google秒表ftw)相比,此测试报告的时间始终比秒表测量的时间长约300毫秒.

我的问题是这些:

• 这个逻辑中是否存在导致错误结果的漏洞？
• 有没有其他可靠的方法来实现这种测量？

脚本如下:

function loadPoll() {
    var i, duration,
        dataRow = '.firstRow', noDataRow = '.noData',
        grids   = ['.grid1', '.grid2', '.grid3','.grid4', 'grid5', 'grid6', 'grid7'];

    for (i = 0; i < grids.length; ++i) {
            var data   = grids[i] + ' ' + dataRow,
            noData = grids[i] + ' ' + noDataRow;

        if (!(document.querySelector(data) || document.querySelector(noData))) {
            window.setTimeout(loadPoll, 100);
            return;
        }
    }

duration = Date.now() - performance.timing.fetchStart;
    window.loadTime = duration;
}

loadPoll();

一些考虑:

• 虽然我知道人类的响应时间可能很慢,但我确信使用谷歌秒表的人为因素并未引入300毫秒的不一致性.

• 查看代码可能看起来多个元素的轮询可能导致300毫秒的不一致,但是当我将被监视的元素数量从7更改为1时,在报告的时间内仍然有300毫秒的剩余时间.自动化测试.

• 我们的自动化测试在Selenium和Protractor控制的框架中执行.

如果您能够提供任何见解,请提前致谢!

Answer 1

如果使用performance.now()的时间应精确到5微秒.据MDN称:

performance.now()方法返回一个以毫秒为单位的DOMHighResTimeStamp,精确到千分之五毫秒(5微秒).

返回值表示自时间原点(PerformanceTiming.navigationStart属性)以来经过的时间.