Measuring page load timings using JavaScript

Question

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

Specifically, the script polls each grid, looks to see if there is a first row or a 'no data' message, and once all grids have satisfied this condition the script records the value between Date.now() and performance.timing.fetchStart, and treats this as the time the page took to load.

This script works more or less as expected, however when compared with human measured timings (Google stopwatch ftw), the time reported by this test is consistently around 300 milliseconds longer than when measured by stopwatch.

My questions are these:

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

The script is as follows:

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 am aware that human response time can be slow, I am sure that the 300 millisecond inconsistency is not introduced by the human factor of using Google stopwatch.

• Looking at the code it might appear that the polling of multiple elements could lead to the 300 ms inconsistency, however when I change the number of elements being monitored from 7 to 1, there still appears to be a 300 ms surplus in the time reported by the automated test.

• Our automated tests are executed in a framework controlled by Selenium and Protractor.

Thanks in advance if you are able to provide any insight to this!

Answer 1

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

The performance.now() method returns a DOMHighResTimeStamp, measured in milliseconds, accurate to five thousandths of a millisecond (5 microseconds).

The returned value represents the time elapsed since the time origin (the PerformanceTiming.navigationStart property).