前端性能优化-HTTP添加Expires头

原创作品，请勿抄袭，翻版必究。转载请注明作者。

简介

HTTP中的Cache-Control和Expires

Web页面设计中，建少HTTP请求可以提高页面响应速度。浏览器在第一次访问页面时下载的资源会缓存起来，第二次访问时会判断在缓存中是否已有该资源并且有没有更新过，如果已有该资源且没有更新过，则去缓存去取，这样减少了下载资源的时间。原理上是通过HTTP Rquest Header中的 if-modified-since 和Response Headers中的last-modified来实现（还有一对组合If-None-Match和Etag，类似，但有细微差别，不属于本文重点讨论范围，如有兴趣可参考链接Google Developers 优化性能指导），HTTP请求把if-modified-sincede 时间传给服务端，服务端把last-modified时间与之对比，如果相同，则意味着文件没有改动，则返回304，浏览器则从缓存中获取资源，无需下载。

虽然这种方法减少了已缓存资源的下载时间，但是仍然发起了一次http请求。仍然还有更激进的做法来节省也页面加载的时间，就是免去该资源的http请求。即本文的主角，HTTP的Expires和Cache-Control。

tmall home page

Cache-Control的使用机制

Cache-Control属性值是在server端配置的，不同的服务器有不同的配置，web服务器 apache、nginx、IIS,应用服务器tomcat等配置都不尽相同；以Apache为例，在http.conf中做如下配置：

第一段代码是指jgp/jepg/png/gif/ico等类型的文件缓存1年。单位是秒，你可以自己算算。第二段代码是指css和js这种文件类型缓存1个月。通常来说一些长期不变的图片比如logo，背景图片，字体，icon小图标等变化一般不会频繁，可以设的久一点。可以设个一年半载，具体设多久见仁见智了。新闻，广告等频繁更新的图片，不用缓存。css，js文件更新的周期会短一点，可以设置一周或者一个月。

如果用户浏览器缓存了页面的资源，你又想让用户更新怎么办呢？你可以通过修改该资源的名称来实现。名字改了，浏览器会当做不同的资源，这样就可以实现了。在大型项目中不可能频繁的更新文件名，要通过全局的配置文件版本的方法。你可以想想有没有更好的方式。详细的Cache-Control可以参考这篇文章How to use Cache-Control

Expires的使用机制

expires也是需要在服务端配置（具体配置也根据服务器而定），expires添加的是该资源过期的日期，浏览器会根据该过期日期与客户端时间对比，如果过期时间还没到，则会去缓存中读取该资源，如果已经到期了，则浏览器判断为该资源已经不新鲜要重新从服务端获取。通过这种方式，可以实现直接从浏览器缓存中读取，而不需要去服务端判断是否已经缓存，避免了这次http请求。值得注意的是expires时间可能存在客户端时间跟服务端时间不一致的问题。所以，建议expires结合Cache-Control一起使用，大型网站中一起使用的情况比较多见。

实际测试效果

未使用expires和cache-control的情况（已经访问过，资源已经缓存）：

我使用chrome的network来查看页面加载的情况，利用Live HTTP Headers这个google浏览器插件来监听http发起请求的状况。

打开网址http://stevesouders.com/hpws/expiresoff.php（一个yahoo！工程师的测试demo，拿来用下），注意是打开；（特别注意，刷新的话无论你是否缓存浏览器都会重新发起HTTP请求来判断是否更新）

监听器插件的图片

可以看出虽然是304，但是实际上发起了HTTP请求。

使用Expires和Cahce-Control的情况（已经访问过，资源已经缓存）

打开网址http://stevesouders.com/hpws/expireson.php（一个yahoo！工程师的测试demo，拿来用下）。

可以看出图片都是来自缓存，time为0也可以看出没有发起http请求。

上图可以看出，没有发起图片的http请求。这样在图片非常多的网站中，大大减少了http的请求。从而大幅提高了网站的性能。这种方法不仅仅针对图片，对css，js，font，等等都适用。现在在阿里巴巴的比较前沿的产品中都可以看到使用expires和cache-control的身影。使用此方法，可以提高20%-30%的网站性能。

我会不断的推出前端性能优化的各种方法（每周一至二篇文章），站在巨人的肩膀上，加上我个人的亲自测试和研究，用图文并茂的方式向大家介绍。请大家关注我。

第一篇，前端性能重要性

第二篇，前端性能优化-HTTP添加Expires头

第三篇，前端新能优化-对HTTP传输进行压缩

第四篇，前端性能优化-将CSS文件放在顶部

第五篇，前端性能优化-将Scripts放在底部