使用JavaScript测量页面加载时序

时间:2017-06-22 14:52:35

标签: javascript performance testing extjs

我在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毫秒的盈余 自动化测试。

  • 我们的自动化测试在受控制的框架中执行 硒和量角器。

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

2 个答案:

答案 0 :(得分:9)

如果您使用performance.now(),则时间应精确到5微秒。根据{{​​3}}:

  

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

     

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

答案 1 :(得分:3)

如果我是你,我会修改我的方法来捕捉实际的时间测量。您可以评估在给定时间段内可以执行的调用次数,而不是评估每次loadPoll()调用的时间。换句话说,您可以计算更长时间内的函数迭代次数,例如1000毫秒。以下是如何做到这一点:

var timeout = 1000;
var startTime = new Date().getTime();
var elapsedTime = 0;

for (var iterations = 0; elapsedTime < timeout; iterations++) {
    loadPoll();
    elapsedTime = new Date().getTime() - startTime;   
}

// output the number of achieved iterations
console.log(iterations);

此方法可为您提供更一致,更准确的时间估算。更快的系统将简单地实现更多的迭代。请记住,setInterval()/ setTimeout()并不是非常精确,对于非常小的间隔计时器,这些函数可能会因为垃圾收集,事件需求以及可以在代码处理时并行运行的许多其他事情而导致无效结果执行。

相关问题