Question

浏览器下载的未使用的CSS图像是否被忽略？

EG。在CSS规则中与任何元素都不匹配。

.nothingHasThisClass{background:url(hugefile.png);}

或者这会依赖于浏览器吗？

Answer 1

这将取决于浏览器，因为它是决定实施规范的方式，但是在这里进行快速测试：

Chrome：不
FireFox：不
Safari：不
IE8：不
IE7：不
IE6：未知（有人可以测试和评论吗？）

Answer 2

不，它们不会被下载，至少在Firefox，IE8和Chrome中没有下载。

一种简单的测试方法：

<!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，则会下载该图像。在我的任何测试中都不是这样。

Answer 3

快速测试证明了这一点。

<!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）中证明是正确的。

Answer 4

Firefox和Chrome（Ubuntu 9.10）不会下载未在DOM中应用的类/ ID的图像。

但这可能与平台和浏览器有关。

Answer 5

有时，它完全取决于“未使用”的含义。不同浏览器的定义不同。例如，在Firefox中，应用于<noscript>标记的样式被视为“未使用”，因此不会下载任何图像。

Chrome 26（可能全部，不确定），下载CSS图像（如果它们应用于<noscript>元素，即使启用了JS也是如此。（我不清楚为什么，也许这是一个错误？）。

不下载应用于 <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，则只在Chrome中下载nojsonly.png。

我使用此技术来测量来自非JS用户的流量级别，因为Google Analytics在此失败了。我更喜欢使用背景CSS图像而不是普通的<img...>标记，因为我在（未经测试的）理论下工作，机器人不太可能抓取CSS图像而不是<img...>图像，留下更多准确计算人类访客。

Answer 6

几乎所有浏览器都进行延迟加载。如果不需要图像，则不下载。使用firebug（Firefox / Chrome中的附加组件）查看资源的加载时间。

Answer 7

有趣的是，Chrome（至少）会在以下示例中下载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>

是否下载了未使用的CSS图像

7 个答案:

实施例