下载了未使用的CSS图像吗？
是由浏览器下载的未使用的CSS图像还是忽略？
例如。 在CSS规则中不匹配任何元素。
.nothingHasThisClass{background:url(hugefile.png);} 或者这会依赖于浏览器？
这将是浏览器的依赖，因为这是他们如何决定实现规范，但在这里快速testing：
- Chrome： 没有
- 火狐： 不
- Safari： 不
- IE8： 不
- IE7： 不
- IE6： 未知 （有人可以testing和评论？）
不，他们没有下载，至less在Firefox，IE8和Chrome。
一个简单的方法来testing这个：
<!DOCTYPE html> <html> <head> <style type="text/css"> .nonexistent { background: url('index.php?foo'); } </style> </head> <body> <?php if(isset($_GET['foo'])) { file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']); } ?> </body> </html>
如果test.txt被浏览器的用户代理填充，则图像被下载。 我的任何testing都不是这样。
快速testingcertificate了这一点。
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"><!-- .hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);} .hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);} --></style> </head><body> <div class="hassomething"></div> </body></html>
第二张图片tumblr_kxytwr7YzH1qajh4xo1_500.png被下载了，但没有下载。 Chrome（开发人员工具）和Firefox（Firebug）certificate了这一点。
Firefox和Chrome（Ubuntu 9.10）不会下载未在DOM中应用的类/标识的图像。
虽然这可能是平台和浏览器依赖。
几乎所有的浏览器都会延迟加载。 如果图片不是必需的，则不会下载。 使用firebug（Firefox / Chrome中的附件）查看资源的加载时间。
有时候，这只取决于“未使用”的含义。 不同的浏览器对其进行不同的定义 例如，在Firefox中，应用于<noscript>标签的样式被视为“未使用”，因此任何图像都不会被下载。
Chrome 26（可能所有这些都不确定），即使在启用了JS的情况下，也会将CSS图像应用到<noscript>元素下载。 （但是，我不明白为什么，也许这是一个错误？）。
但是， 它不会下载应用于<noscript>元素内的元素的CSS图像。 （当然这是预期的行为）。
例：
CSS：
noscript { background-image: url('always.png') 0 0 repeat; } noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }
HTML：
<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome. Will not be downloaded in Firefox</noscript> <noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>
在这种情况下，如果用户启用了JS，那么always.png和otherbg.png都将在Chrome中下载。 如果用户没有启用JS，那么只有nojsonly.png在Chrome中下载。
我使用这种技术来衡量来自非JS用户的stream量级别，因为Google Analytics（分析）在这里使我们失败。 我更喜欢使用背景CSS图像而不是普通的<img...>标签，因为我正在根据（未经testing）的理论工作，即机器人不太可能抓取CSS图像比<img...>图像，为访客留下更准确的数字。
有趣的是，Chrome（至less）会在下面的例子中下载unused.png：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>test</title> <style type="text/css"> .unused { background: url(unused.png) no-repeat; } .used { background: url(used.png); } </style> </head> <body> <div class="unused used"> hello world </div> </body> </html>
