如何在浏览器中监控渲染时间？

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.

Answer 3

As far as non-invasive techniques are concerned, Hammerhead measures complete load time (including JavaScript execution), albeit in Firefox only.

I've seen usable results when a JavaScript snippet could be added globally to measure the start and end of each page load operation.

Answer 4

Have a look at Selenium - they offer a remote control that can automatically start different browsers (eg IE6), load pages, test for specific content on the page. At the end reports are generated that also show the rendering times.

Answer 5

Since others are posting answers that use other browsers, I guess I will too. Chrome has a very detailed profiling system that breaks down the rendering time of the page and shows the time it took for each step along the way.

As for IE, you might want to consider writing a plugin. There seems to be few tools like this on the market. Maybe you could sell it.

Answer 6

On Firefox you can use Firebug to monitor load time. With the YSlow plugin you can even get recommendations how to improve the performance.