CSS精灵和HTTP请求

Question

My first question was : if I declare multiple rules like

.link1 {background:url('sprite.png') 0 0;}
.link2 {background:url('sprite.png') -20px -20px;}

Do these count as separate HTTP requests? I found multiple answers on this and I know now that the image would be fetched from the browsers cache.

Now for the new question: How would I check this in Chrome/Firefox? Where in the console can I check how many HTTP requests are made from within a stylesheet.

Answer 1

Off the top of my head YSlow can help with this

Yahoo's Exceptional Performance team has identified 34 rules that affect web page performance. YSlow's web page analysis is based on the 23 of these 34 rules that are testable.

1. Minimize HTTP Requests

That said, sprites specifically reduce the number of HTTP requests being made

Answer 2

Bring up the Chrome or Firefox Developer Tools and check the Network tab to see a list of all network operations and requests.

Sprites should only require a single GET request regardless of how many times they are referenced in the CSS. It is cached after the initial request.

You can also use a tool like YSlow or an online page speed test / profiler to examine network requests.

Answer 3

Do these count as separate HTTP requests?

Nope. It gets cached the first time and then reused from cache. In some cases using SSL may force the browser to reload them on return visits.

The Minimize HTTP Requests rule isn't a bad one, but the style rules can become a nightmare to manage if your 'sprite sheet' gets quite large!