How can I monitor the rendering time in a browser?

Question

I work on an internal corporate system that has a web front-end using Tomcat.

1. How can I monitor the rendering time of specific pages in a browser (IE6)?
2. I would like to be able to record the results in a log file (separate log file or the Tomcat access log).

EDIT: Ideally, I need to monitor the rendering on the clients accessing the pages.

Answer 1

The Navigation Timing API is available in modern browsers (IE9+) except Safari:

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

Answer 2

In case a browser has JavaScript enabled one of the things you could do is to write an inline script and send it first thing in your HTML. The script would do two things:

1. Record current system time in a JS variable (if you're lucky the time could roughly correspond to the page rendering start time).
2. Attach JS function to the page onLoad event. This function will then query the current system time once again, subtract the start time from step 1 and send it to the server along with the page location (or some unique ID you could insert into the inline script dynamically on your server).

<script language="JavaScript">
var renderStart = new Date().getTime();
window.onload=function() { 
   var elapsed = new Date().getTime()-renderStart;
   // send the info to the server 
   alert('Rendered in ' + elapsed + 'ms'); 
} 

</script>

... usual HTML starts here ...

You'd need to make sure that the page doesn’t override onload later in the code, but adds to the event handlers list instead.