Measuring page load time using JavaScript

Question

I created a script in JavaScript that is injected into our Ext JS application during automatic browser testing. The script measures the time taken to load data in our grids.

In particular, the script polls each grid, looks to see if there is a first line or the message “no data”, and as soon as all grids satisfy this condition, the script writes the value between Date.now () and performance.timing.fetchStart, and treats it as page load time.

This script works more or less, as expected, however, compared to the measured human timings (Google ftw stopwatch), the time indicated in this test is constantly about 300 milliseconds longer than when measured by a stopwatch.

My questions are as follows:

• Is there a hole in this logic that would lead to incorrect results?
• Are there alternative and accurate ways to achieve this dimension?

The script looks like this:

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(); 

Some considerations:

• Although I know that a person’s response time can be slow, I’m sure that 300-millisecond inconsistency is not introduced by a person using the Google stopwatch.

• When looking at the code, it may seem that polling several elements can lead to 300 ms inconsistency, however, when I change the number of controlled elements from 7 to 1, there still seems to be an excess of 300 ms for the time the automated test reported.

• Our automated tests are performed within the framework controlled by Selenium and Protractor.

Thanks in advance if you are able to imagine it!

Answer 1

If you use performance.now() , the time should be accurate to 5 microseconds. According to MDN :

The performance.now () method returns the DOMHighResTimeStamp value, measured in milliseconds, with an accuracy of five thousand millisecond steps (5 microseconds).

The return value is the time elapsed since the start (PerformanceTiming.navigationStart property).

Answer 2

If I were you, I would reconsider my approach to how the actual measurement of time is recorded. Instead of estimating the time for each call to loadPoll (), you can estimate how many calls you can make in a given period of time. In other words, you can count the number of iterations of functions over a longer period of time, such as 1000 milliseconds. Here's how to do it:

 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); 

This approach will give you more consistent and accurate time estimates. Faster systems simply achieve more iterations. Keep in mind that setInterval () / setTimeout () is not entirely accurate and for very small interval timers these functions may give you invalid results due to garbage collection, event requests and many other things that can be executed in parallel at the time how your code is executed.