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


127

浏览器下载了未使用的CSS图像还是将其忽略?

例如。在与任何元素都不匹配的CSS规则中。

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

还是这取决于浏览器?


20
+1有趣的问题
Jitendra Vyas 2010年

Answers:


89

这将取决于浏览器,因为这是他们决定实施规范的方式,但是在此处进行快速测试:

  • Chrome:不会
  • FireFox:
  • Safari:不会
  • IE8:不会
  • IE7:不会
  • IE6:未知(有人可以测试并发表评论吗?)

1
我假设您已经在Windows上进行了测试?如果您想添加跨平台比较,那么我可以提供Firefox 3.6.x和Chrome 5.0.307.11(Ubuntu 9.10)也不提供。=)
大卫说应

啊哈,我明白了。我认为,Firefox,Chrome和Safari浏览器无法很好地加载它们,但是我不会把它放在IE之上。对于IE 6和IE 7,结果是否相同?
亚历克斯(Alex)

@Alex-IE7是的,尽管更复杂的页面可能会欺骗它?IE6我无法测试我在哪里...也许这里有人可以并更新我的答案。
尼克·克雷弗

49
我可以提出抗议,反对在IE6中测试任何内容吗?
戴夫·马克尔2010年

2
@Dave:所有内容都应在IE6中测试(如果不可靠,则将在该版本中运行),如果它在此处正确运行,它将在每个该死的浏览器中运行:P
N 1.1 2010年

13

不,它们不会下载,至少不会在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使用浏览器的用户代理填充,则将下载图像。在我的任何测试中都不是这种情况。


9

快速测试证明了这一点。

<!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)中证明了这一点。


8

Firefox和Chrome(Ubuntu 9.10)不会下载未在DOM中应用的类/标识的图像。

但是,这可能取决于平台浏览器。


3

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

Chrome 26(可能不确定所有),如果将CSS图像应用于<noscript>元素,即使启用了JS。(我现在还不清楚为什么,也许这是一个错误?)。

下载应用到元素的CSS图片<noscript>元素,但。(当然,这是预期的行为)。

例:

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,则始终会在Chrome中下载always.png和otherbg.png。如果用户启用JS,则仅在Chrome中下载nojsonly.png。

由于Google Analytics(分析)在这里无法为我们提供服务,因此我使用了这种技术来衡量未启用JS的用户的流量水平。我更喜欢使用背景CSS图像而不是普通<img...>标签,因为我是根据(未经试验)的理论进行工作的,即与图像相比,机器人更不可能抓住CSS <img...>图像,从而为人类游客留下了更准确的计数。


2

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


0

不过,有趣的是,在以下示例中,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>

11
好吧,那是因为它被引用了。所以我不知道把它称为“未使用”是真的有效..
NotMe

@eentzel,请从div中删除“未使用”,重做测试并告诉我们您的结果。
Anse
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.