How to measure image download time on client side

问题:

In the Img tag, we know that the image has an OnLoad event that fires when the images finish loading. But can we get the accurate measure when the image begin to download? I am trying to measure a website's Page Load Time, so knowing how long it takes for an image to load will be part of my analysis if that's possible.

I would like to do it from an automated fashion, so I can measure real client experiences instead of putting my website on Yslow or PingDom( http://tools.pingdom.com/fpt/). I have tried to look into Navigation Timing Apis (http://w3c-test.org/webperf/specs/NavigationTiming/) unfortunately even they provide insights such as DNS resolution time, but resource fetching within the web request doesn't seemed to be supported.

回答1:

You can start to experiment with whether the Resource Timing API will meet your needs useing either IE10 of the Chrome Dev Channel - getEntriesByName is the method that's probably most use for a single resource.

I wrote a primer form the Performance Advent Calendar http://calendar.perfplanet.com/2012/an-introduction-to-the-resource-timing-api/

回答2:

You can use Firebug on Firefox or the Developer Tools in Chrome to get information on page resources.