Is There A Definitive Way To Measure "time To Paint" For Performance?

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 paint). Is t

Solution 1:

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

functionfindTime(done){
if (done==false){var time1 = newDate.getTime();}
if (done==true) {var time2 = newDate.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.

Solution 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/