Initial Render, reflows & repaints

[calumfodder]

Currently there is a snapshot of the final rendered page.

It would be good to have a snapshot of the first render as well.

it would also be good to have counters for the number of reflows and repaints that take place between the initial render and the final render.

The purpose of the initial render screenshot would be to encourage, and display the results of, using HTTP 1.1 chunked transfer and flushing the head of the HTML document (and maybe a banner section) early on to kickstart downloading of elements before the rest of the HTML page has been computed.

The counters for reflows and repaints will give an indication as the efficiency of your CSS and JS in interacting with the DOM and browser rendering engine.

This site also has a very pretty way of visualising/fingerprinting your page's DOM that would make a nice souvenir of a visit to webpagetest.
http://www.aharef.info/static/htmlgraph/

[pmeenan]

There were a couple of scren shots that were added over the last couple of weeks. If you click on the screen shot icon for a new test you will see (at a minimum) screen shots for the fully loaded, start render and document complete milestones. If you run the test looking for a specific DOM element then you will also get a screen shot at that time. here is a recent sample from the test history: http://www.webpagetest.org/result/090720...reen_shot/

It sometimes may not grab a start render screen shot if the browser doesn't update the screen before the test completes (haven't decided how I want to handle that test case yet).

I have something in dev I toy with every now and then for measuring the different reflow points but I don't think it's ready for prime time yet (it only measures when the page dimensions change and that may not happen with a reflow). I also have some other things I'm toying with for the page repaints that may work out better.

Thanks for the feedback and suggestions!

-Pat

[calumfodder]

(07-21-2009 01:17 AM)calumfodder Wrote:  Currently there is a snapshot of the final rendered page.

It would be good to have a snapshot of the first render as well.

It would be good if I looked more closely at the screenshot pages! there is already a start render snapshot. Doh!

[alexanderol]

Hi guys,
I agree with that there is a snapshot of the final rendered page. It would be good to have a snapshot of the first render as well. It would also be good to have counters for the number of reflows and repaints that take place between the initial render and the final render.

[pmeenan]

FWIW, you can actually capture a full video recording of the page load now (video tab in the advanced section) in addition to the initial render that is part of all of the tests. For reflows I'll have to see if there is anything I can hook in IE that will provide that level of visibility.

Thanks,,

-Pat