Finding how long a particular DOM element took to load

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));
  });
});