Question

I am working on a JavaScript utility that tells the user the number of 3rd party links embedded into a web page. I’d like to be able to give metrics on how long they took to load (and possibly payload size) much like FireBug, but I don’t know if I can get at this information using raw JS.

The consumers of this tool are business people who won’t be running Firefox, or understand firebug etc.

Any suggestions?

Answer 1

Using jQuery you can hook into the load event on all images then record the difference in time between $(document).ready and the current time. That’ll give you some benchmarks to work from.

For Example, the following should log the # of ms it took each image to load (from the moment the dom was ready):

$(function() {   var startTime = new Date().getTime();    $('img').load(function() {     var currentTime = new Date().getTime();     console.log(this.src + ' ' + (currentTime-startTime));   }); });