雪碧优化？

有谁知道图像是如何加载每个浏览器？对于内联图像，对相同图像执行两次调用会触发两个服务器请求还是只有一个？对下载的图像的后续调用如何处理？雪碧优化？

对于CSS图像，调用CSS文件时是在CSS中调用的所有图像，还是在调用图像的单独类时使用？作为一个极端的例子，如果我有一个调用200个独立图像的CSS文件，但在第一页加载时只调用其中一个图像，那么所有的200个被调用还是只有一个？如果加载的浏览器有不同的加载方式？

更改了这个标题，因为它演变成更多关于如何优化精灵的讨论。 –

图片的URL应该引起只有一个服务器PER PAGE击中。对于该页面的点击，浏览器可以假设图像将保持不变，即使图像在页面上出现多次

对于下一页，浏览器将倾向于执行“if-modified-since”请求图像，并且只有在自昨晚以来修改了图像的情况下才能获得新图像。但是，它只会每页都做一次。

一旦图像被下载并缓存，您很可能只会看到200个获取请求和304个未修改的响应，直到图像脱离缓存。

2011-09-12 20:02:15

因此，对于我的问题的第二部分，CSS文件中引用的所有图像导致服务器命中或只是那些正在使用当前页面？ –

据我所知，在CSS中的任何url（）引用将导致该网址被击中。也许有一个浏览器只通过获取页面中实际使用的浏览器来优化，但是谁知道。 –

我问的原因是我想确定使用一个主精灵还是多个较小精灵更好。例如，如果我将10张图像制作为精灵图像，其中5张图像仅在我的网站的第三张图像上使用，那么最好是两张精灵图像？如果CSS文件中的所有图像都在页面加载时下载，那么我会认为不是，但如果只下载页面调用的类中的图像被下载，那么我会认为是。思考？ –

你居然拨打电话每一个形象，这就是为什么它建议使用CSS sprites在适当的时候

2011-09-12 20:01:29

所以，即使图像被一个没有在页面上使用的类调用，它仍然会被加载，因为它在CSS文件中？ –

以后如何处理同一图像？我调用同一个精灵20次还是应该将这些类串起来并只调用精灵一次？ –

浏览器不会调用精灵20次，1次就足够了，因为下次它已经加载了 –

回答