performance - Measuring page load timings using JavaScript - Stack Overflow

admin管理员组

文章数量:1400036

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 pared 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!

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 pared 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!

• javascript
• performance
• testing
• extjs

Share Improve this question Follow edited Jun 28, 2017 at 18:28 Patrick Roberts 52k1010 gold badges117117 silver badges163163 bronze badges asked Jun 22, 2017 at 14:52 Luke hLuke h 33733 silver badges2121 bronze badges 1

• This question is tagged node.js but the question contains code that uses window, document.querySelector. I'm removing the tag. – Patrick Roberts Commented Jun 28, 2017 at 18:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9 +50

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

If I were you I would revise my approach to how the actual measuring of the time is captured. Rather than evaluating the time for each loadPoll() call, you can evaluate how many calls you can perform for a given period of time. In other words you can count the number of function iterations for a longer period of time, eg 1000 milliseconds. Here's how this can be done:

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 will simply achieve a greater number of iterations. Keep in mind that setInterval()/setTimeout() are not perfectly precise and for really small interval timers these functions may give you invalid results due to garbage collection, demands from events and many other things that can run in parallel while your code is being executed.

本文标签： performanceMeasuring page load timings using JavaScriptStack Overflow