使用JavaScript测量页面加载时间

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

具体来说，脚本轮询每个网格，查看是否有第一行或“无数据”消息，并且一旦所有网格满足此条件，脚本将记录Date.now（）和performance .timing.fetchStart，并将其视为页面加载的时间。

这个脚本或多或少像预期的那样工作，但是当与人类测量的计时（Google stopwatch 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毫秒不一致不是由人类使用Google秒表的因素引入的。
看着它可能会出现多个的投票站元素可能导致300毫秒不一致，但是当我改变从7被监视到1个元素的数量，有似乎仍然是一个代码在自动测试报告的时间内有300毫秒的剩余时间。
我们的自动化测试是在由 Selenium and Protractor控制的框架中执行的。

如果您能提供任何见解，请事先致谢！

来源

2017-06-22 Lucas Holmes

此问题标记为[tag：node.js]，但问题包含使用'window'，'document.querySelector'的代码。我正在移除标签。 –

如果使用performance.now()，则时间应精确到5微秒。根据MDN：

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

返回值代表自时间起点（PerformanceTiming.navigationStart属性）以来所经过的时间。

来源

2017-06-22 16:19:57 chrisuae

谢谢，当直接比较这个Date.now（） - performance.timing.fetchStart;这似乎是更正确的20毫秒左右，这是一个正确的方向迈出的一步！ –

如果我是你，我会修改我的方法来捕捉实际的时间测量。您可以评估一段时间内您可以执行多少次呼叫，而不是评估每次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（）并非完全精确，对于实际上很小的间隔计时器，由于垃圾收集，事件请求以及许多可以在代码运行时并行运行的其他功能，因此这些函数可能会导致无效结果执行。

来源

2017-06-28 13:35:44 neatsu

使用JavaScript测量页面加载时间

回答

相关问题