Is there a way in Javascript to time a browser reflow?

Question

I need to be able to benchmark a particular build of a webkit-based browser and am measuring the length of time it takes to do certain stuff like DOM manipulation, memory limits etc.

I have a test below which records the length of time it takes to simultaneously load in 10 fairly heavy PNG graphics. In code, I need to be able to time how long it takes for the load to finish. I have tried setting the onLoad function on the dynamic Image object to produce a time in ms. However, as shown in the cap below it is giving an inaccurate reading because the reading it gives is a tiny amount due to it only recording the data transfer part of the load and then there is a considerable (3000+ms) delay for when the images are viewable - looped in blue, this is the browser reflow cycle.

Is there some event in webkit I can use to record when the browser has finished a reflow so that I can benchmark this? I have to be able to record the time in milliseconds in code because the build of webkit I am testing has no developer tools. I am able to observe the difference in Chrome ok but the performance between the two builds differs drastically and I need to be able to quantify it accurately for comparison.

Carnot

On a small scale, you could use screen capture software, and (manually) find the point where the image is loaded. – Pilfer

This excellent article on reflowing/repainting mentions SpeedTracer for webkit -- might help? – Kinlaw

Answer 1

If you are using jQuery, you could try recording the time between document ready and window load, that would give you an approximation.

(function(){
    var start, end;

    $(document).ready(function(){
         start = new Date()    
    });
    $(window).load(function(){
         end = new Date();
         console.log(end.getTime() - start.getTime());
    });

}());

Edit:

Have you taken a look at the Browserscope reflow timer? Basically it checks to see how long it takes for the browser to return control to the JavaScript engine after changes to the dom. According the the page it should work in any browser, although I haven't tested it personally. Perhaps you could adapt the code run during the tests to time the reflow in your page.

Anthracene

Produces the same result as img.load - it triggers when the file has finished downloading but there is still a big, untimed pause between browser reflow start -> finish – Carnot

Answer 2

Also, you might want to have a look at CSS Stress Test. The bookmarklet is really great for page performance testing. http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

How about setting the PNG as a div background-image and running the stress test, it should enable/disable the image multiple times with timings.

Singleminded