reload

page load time:
 

If you have a CSS class that specifies a background image ("button1.gif"), and later a stylesheet redefines that class to use a different background image ("button2.gif") the cascading behavior of CSS causes "button2.gif" to be used. And that's exactly what happens in all major browsers.

But even though "button1.gif" never gets used, Safari 4 and Chrome 4 still download it. That's because they speculate that the background-image style won't be overwritten. Rather than wait for all stylesheets to finish downloading, Safari and Chrome start downloading the background image as soon as an element is found that uses that class. This might seem wasteful, but in reality very view pages redefine the background-image style. This performance optimization causes many web pages to render more quickly.

This test page has an element that uses the "bgimage" class. That class has a background image that takes 4 seconds to download. Later a stylesheet is downloaded that redefines the "bgimage" class, but the new background image downloads immediately. If the page load time is under 4 seconds, the first background image wasn't downloaded. If the page load time is over 4 seconds, the first background image was downloaded even though it's never used.