CSS，Gzip压缩以及HTTP缓存

css：每个声明只使用一次

要想让你的网站速度更快，其中重要的一条就是发送到浏览器的客户端代码要尽可能小，在优化css文件时，一个重要的原则就是每个声明只使用一次。这样就可以严格使用选择器组合。

例如，你可以将这两个规则

 
 
h1 { color: black; }  
p { color: black;   

合并成一个规则

 
 
h1, p { color: black; } 

这个例子是最简单的了，实际开发中的情况要复杂得多，根据我个人的开发经验，每个声明只使用一次后可以将css文件的大小降低20%-24%。下面再看一个复杂一点的例子：

 
 
h1, h2, h3 { font-weight: normal; }  
a strong { font-weight: normal !important; }  
strong { font-style: italic; font-weight: normal; }  
#nav { font-style: italic; }  
.note { font-style: italic; } 

根据每个声明只使用一次的原则，将其缩减为

 
 
h1, h2, h3, strong { font-weight: normal; }  
a strong { font-weight: normal !important; }  
strong, #nav, .note { font-style: italic; }  

注意!important声明可以与众不同。

在应用这个方法时有几点需要牢记于心：

◆首先，太长的选择器可能致使这个方法无效，重复选择器如html body table tbody tr td p span.example不能减少文件尺寸大小，实际上，每个声明只使用一次可能意味着选择器的数量会上升，甚至可能导致css文件更大，使用紧凑的选择器是更有帮助的，并且可以提升样式表的可读性。

◆第二，小心css规则，当一个用户代理不能解析选择器时，必须忽略声明，当你遇到这种情况时，只需要修改一下规则，让其可以使用多次即可。

◆第三，也是最重要的一点，如果你对样式表进行了排序，这个原则会改变你的排序，但这个顺序可以由浏览器来决定，如果你使用这种方法运行出了问题，最好的解决办法就是产生一个异常，并在出现问题的地方让声明使用多次就可以了。

在使用一个声明只使用一次的方法维护样式表时要格外小心，可以通过优秀的编辑器来跟踪变化（如显示变化行），然后在需要的地方插入声明，这种做法需要合并到工作流中。其实一个有效的方法是使用缩进排版，这样就很容易发现重复的声明的了。

使用gzip压缩页面

Gzip压缩需要Web服务器的支持，在没有gzip压缩的情况下，Web服务器直接把html页面发送给浏览器，而支持gzip的Web服务器将把html压缩后再发给浏览器，支持gzip的浏览器再在本地进行解压和解码，并显示出来。Gizp会将css文件，js文件，html文件中那些重复的字符串、标签、空格和样式定义进行压缩。我们还是举一个例子加以说明。

下面的代码未压缩前69字节，压缩后85字节。

 
 
< h1>One< /h1> 
< h2>Two< /h2> 
< h3>Three< /h3> 
< h4>Four< /h4> 
< h5>Five< /h5> 

我们将标题标签替换成div标签，源代码大小增加了10字节，变成了79字节，但经过压缩后只有66字节。

 
 
< div>One< /div> 
< div>Two< /div> 
< div>Three< /div> 
< div>Four< /div> 
< div>Five< /div> 

HTTP缓存

如果你正确设置了HTTP缓存报头，不但Web页面载入速度更快了，而且Web服务器的负荷也减少了，是一个双赢的举措。

缓存也就是资源的本地副本，因为很多资源都不会频繁更新，这时浏览器就可以直接从本地获取资源，不用到服务器去取，节省了连接时间和资源下载时间，使用HTTP缓存真正起关键作用的是HTTP缓存报头，这个报头指定了资源的有效时间和最后修改时间。

http协议有两种方法定义资源的有效时间：Expires和Cache-Control: max-age报头。Expires报头指定资源的过期日期，而max-age指定的是当资源下载到本地后多长时间有效。实际上它们要表达的最终含义是一致的。建议将资源的有效日期指定为1个月，长一点的话可以指定为1年。这两个报头一般只需要设置一个即可，如果同时进行了设置，那么max-age的优先级比Expires要高一些。如果你的资源比这个设定期限更新得要频繁一些，那么你可以采取对资源重新命名的方法，通常的做法是在URL中给资源加上版本号，当然这是引用资源的html页面也得做对应的修改。

当本地资源是有效状态时，浏览器有两个选择，其一是全部重新下载所有资源，其二是仅下载有变化的资源，为了让浏览器只下载有变化的资源，我们需要在GET请求中加上条件，http协议给了我们两个选项：Last-Modified和ETag报头。

Last-Modified报头指资源的最后修改时间，ETag报头是每个资源不同版本的唯一身份识别号，我们推荐你使用Last-Modified报头，因为日期如果足够早，浏览器可以跳过请求全部资源的。下面是两个测试页。

关闭Expires

开启Expires

在第二次载入页面时，可以再次点击链接，或者在地址栏中再按一次回车，如果点击刷新按钮，如果资源还在缓存中的话，会强制浏览器重新使用附条件的GET请求去获取资源。

为了更清晰地看到这个完整过程，可以使用HttpWatch工具，它可以查看http报头。如果使用Apache的话，可以参考mod_expires模块的资料。