Is there a definitive way to measure “time to paint” for performance?

Question

I\'m testing various performance tweaks for a large website, and I need to quantify how long it takes from initial load to the document elements appearing (i.e. time to pain

Answer 1

You might want to look into the "DOMContentLoaded" event, this is what jQuery binds to to provide it's .ready() method. The basic idea is you will want to use Date.getTime() to record millisecond values, the first should be the last line of your document (for html downloaded marker). The second you want to call after onload, DOMContentLoaded, loaded and other DOM ready state events.

Quick example (end of your html output):

<script type="text/javascript">
    window.downloadComplete = new Date().getTime();
    document.onload = function() { window.domParseComplete = new Date().getTime(); }
    window.onload = function { window.renderComplete = new Date().getTime(); }
    window.paintTime = window.renderComplete - window.downloadComplete;
</script>

In this example window.downloadComplete will be the millisecond when the DOM has finished downloading, window.domParseComplete is the millisecond when the DOM has been parsed and window.renderComplete is the millisecond when the window reports it's rendering is complete. The window.paintTime is just the number of milliseconds calculated from these millisecond time's.

Answer 2

For starters, I would definitely familiarize myself with the "Net panel" in Firebug:

• http://getfirebug.com/network

I understand that Chrome has a similar tool: Hit "F12" (or use the "wrench" icon):

• https://developers.google.com/chrome-developer-tools/

Answer 3

You could do one of two things: 1) Use Dan Mayor's method. You can simply use new Date().getTime before and after the painting script and subtract them in order to find out how long the script took to complete. However, this may be subject to lag if the entire code lags. It's not necessarily the most accurate way, but it gets the job done. (However, you could create a separate function that calculates the time independently of the other script. See below:)

function findTime(done){
if (done==false){var time1 = new Date.getTime();}
if (done==true) {var time2 = new Date.getTime(); window.alert(time2-time1);}
}

Where done is a boolean parameter you would add after the script is complete.

2) Chrome has a nice developer's console with a timeline capability. Basically, open your Chrome browser and hit command+Shift+C (control+shift+C for windows), and click the timeline button. Then, click the little dot at the bottom of the console, and it should turn red. Refresh the page, and the timeline will start collecting all kinds of timing data for your scripts. Painting events are shown in green. Unfortunately, this is a third party solution.

In the end, there is no way to directly measure this time, due to different amounts of lag, different internet connectivity speeds, processor speeds, etc. However, these 2 methods come pretty close to the actual answer. You may want to test the scripts on different browsers and computers.