Why does my attempt at measuring render time with Web Performance API keep resulting in negative values

Question

I'm building a web-based page render benchmark app which uses the Web Performance API. What it does is basically measuring how much time the browser takes when ordered to render a bunch of div elements, and then build a hidden form, put the calculation result in there, and submit the form to another PHP page for processing. The problem is, the calculation result keeps being negative and in the several trillion range (i.e. a fourteen digit number: -1364403484035). Here's the code:

window.onload=function(){
            results=(performance.timing.loadEventEnd-performance.timing.responseEnd);
            var browserData = document.createElement("form");
            browserData.setAttribute("method","post");
            browserData.setAttribute("action","results.php");

            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", "res");
            hiddenField.setAttribute("value", results);
            browserData.appendChild(hiddenField);

            document.body.appendChild(browserData);
            browserData.submit();`

UPDATE 1:

I did some tweaking to my code, like this:

 window.onload=function(){
        // My edits
        beginning=performance.timing.responseEnd;
        ending=performance.timing.loadEventEnd;
        results=(ending-beginning);
        // End of my edits
        var browserData = document.createElement("form");
        browserData.setAttribute("method","post");
        browserData.setAttribute("action","results.php");

        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", "res");
        hiddenField.setAttribute("value", results);
        browserData.appendChild(hiddenField);

        document.body.appendChild(browserData);
        browserData.submit();`

And used the browser's JavaScript console to peek into the variables' values and I found that ending = 0

epascarello · Accepted Answer · 2013-03-27T17:29:33.920

Reason

It is because loadEventEnd is set when the window.load is done. You are calling it in the load event!

From the MSDN docs:

The loadEventEnd property must return the time when the load event of the current document is completed. It must return zero when the load event is not fired or is not completed.

How to fix:

Use a setTimeout so the onload can end.

window.onload = function () {
     window.setTimeout(function () {
         results = (performance.timing.loadEventEnd - performance.timing.responseEnd);
         var browserData = document.createElement("form");
         browserData.setAttribute("method", "post");
         browserData.setAttribute("action", "results.php");

         var hiddenField = document.createElement("input");
         hiddenField.setAttribute("type", "hidden");
         hiddenField.setAttribute("name", "res");
         hiddenField.setAttribute("value", results);
         browserData.appendChild(hiddenField);

         document.body.appendChild(browserData);
         browserData.submit();
     }, 0);
 }

Another option is poll loadEventEnd until it is not zero.

You have to allow the load to run fully. And your "Edit" is exactly what the first part of my answer tells you what happens. — epascarello, Mar 27 '13 at 17:31
That works fine. Thanks. I didn't refresh the page before submitting Update 1. Now, how can a 0 ms timeout allow the event to end before executing? How does JS setTimout interact with HTML events? I'm confused. But maybe that's for another question thread. — starleaf1, Mar 27 '13 at 17:34
Because the setTimeout adds enough delay for the window.onload to complete fully. — epascarello, May 14 '13 at 18:34

score 3 · Answer 2 · answered Mar 30 '13 at 22:01

3

Use Boomerang (https://github.com/lognormal/boomerang). Life's too short to write your own Navigation Timing library

answered Mar 30 '13 at 22:01

Andy Davies

5,794
2
26
21

Why does my attempt at measuring render time with Web Performance API keep resulting in negative values

2 Answers2

Reason