西红柿爱番茄

对于在css中声明元素的背景(background-image)的时候，或许下面三个问题大家没有多大关注到的，不如下面的一条规则：

[html]
.bgimage { background-image: url("/images/button1.gif"); }
[/html]

1. 想象一下，当页面中没有元素使用了这个class的时候，背景图片是否会被下载？
2. 当页面中有元素使用了它，但是该元素又设置了display:none和visibility:hidden的时候，图片是否会被下载？

3. 当规则出现覆盖的时候，比如在接下来一个外联的css文件中重新定义了bgimage类，并且使用了不同的背景图片的时候，前面那张背景图片是否会被下载？比如：

   [html]
   .bgimage { background-image: url("/images/button2.gif"); }
   [/html]

对于上面的三个问题，Steve Souders已经在他的博文《5e speculative background images》里做了详细的叙述，在这里也先做一个原文意思的翻译：

1. 对于第一种情况，没有元素应用bgimage类的时候，图片不会被下载，这在所有浏览器都是一致的。

2. 当元素同时定义了display:none和visibility:hidden之后，不同的浏览器出现了不同的现象，Firefox3.6和Opera10.10不会下载背景图片，而IE8，Chrome，Safari却下载了，他还提供了一个测试页面《hidden background images》。

   但是，经过我的测试发现，全部的浏览器对元素设置了visibility:hidden时，也是会下载背景图片（为此还跟番茄来打赌，结果输了，只能承认是我人品有问题了，-_-）。在此提供两个测试页面，供大家自行测试：《display》，《visibility》。

3. 对于第三个问题，Steve Souders解释说也是“depends on the browser”，不同浏览器有不同的现象。Chrome和Safari下载了两个背景图片，IE、Firefox、Opera只下载了第二个图片button2.gif。《测试页面》

上面对于CSS中对背景图片的加载问题的三种情况的测试，是比较有意思滴。可以根据这几种情况来提高编写CSS的质量，避免不必要的背景图片在Chrome，Safari，IE下被加载了，造成了性能问题，尤其是第三种情况。但是，根据Steve Souders的一番调查，用他的博文上说：

I went on a search and couldn’t find any popular web site that overwrote the background-image style. Not one. I’m not saying pages like this don’t exist, I’m just saying it’s very atypical.

出现这种情况是比较少见的，但肯定还是会有。

说了那么多，上面的叙述只是个引子，接下来才是题目中说的两种编写规则的测试，但是这个测试也是从上面的几种情况中想到的。为此，我有一个疑问：当CSS代码中很多标签都引用了同一个背景图片，如果把这些标签都独立起来写规则（比如下面代码所示），页面是否会跟服务器进行了相应多的次数交互呢？

[html]
<!– 是否会跟服务器进行了三次的交互呢？即使第一个后面的请求都是从缓存中读取的，但是也必须会跟服务器交互一次来确认吧？ –>
#test1{background:url(test.gif) no-repeat;}
#test2{background:url(test.gif) no-repeat;}
#test3{background:url(test.gif) no-repeat;}
…
[/html]

假设我的疑问是正确的，那么让我们来进行下面的测试：

第一种、把所有都使用同一个背景图片的标签都定义在一起，这样就只有一个CSS规则：
[html]
#test1,#test2,#test3…{
background:url(test.gif) no-repeat;
}
[/html]
第二种、把所有都使用同一个背景图片的标签根据具体情况都分开定义：
[html]
#test1{background:url(test.gif) no-repeat;}
#test2{background:url(test.gif) no-repeat;}
#test3{background:url(test.gif) no-repeat;}
…
[/html]
先不从表面来说这两种写法的孰好孰坏，下面提供了两个测试页面，测试条件是：

1. 在页面中有2000个div元素，分别有不同的id属性
2. 为了尽量保持页面的大小，CSS规则都使用外联link的形式引入
3. 因为这两个测试主要是为了测试两种方式的渲染速度，所以尽量保持了两个CSS文件都是大小相同的（86多K）
4. 使用相同的背景图片，但是文件名不同，以防造成在测试的时候受缓存的影响。

基本条件都差不多了，现在来测试吧：《拆分的方式》，《结合的方式》。测试结果我就不说了，大家可以自行测试，毕竟相信浏览器，相信自己的眼睛和判断。

其实对于上面使用结合的方式来归类一些具有相同CSS规则的写法，是我之前在口碑实习期间，跟师傅乌龙茶学来的，刚开始还以为会增加一连串的CSS规则，给CSS文件页面的大小增加了不少的字节，但是当你整合好整体的CSS样式之后，你会发现，其实页面会有一个很好的架构，维护起来非常的方便（关于维护这点，有一个经验让我印象非常深刻，就是在今年4月20号的时候，公司要求口碑整站首页要变灰，当开始知道这事的时候，纳闷起来了，那么多首页，在一个下午的时间都要变灰，包括背景、链接、文字。但是，当我在修改灰色版本首页的时候，因为师傅之前是使用了结合的方式，背景、链接等等颜色样式都整合在了一起，所以整个CSS文件，只需要改动几处，问题就解决了，Fuck，还真省事）。所以，把具有相同CSS规则的标签的样式都写在一起，一个维护上也都是非常方便的。

今天去口碑网逛的时候，看到自己最后切的二级城市的页面改版的项目上线了。欣慰啊~，所以共享下本人在编写页面期间写的CSS文件，供指正：《http://www.ilovejs.net//lab/default-css/koubei.html》