WPO基础：浏览器缓存、条件GET请求和Expires Header
我们常常会有如下经验：我第一次访问某个网页的时候，花费了10秒钟，第二次进去的时候，5秒钟内页面就完全打开了。
为什么会这样呢？我们用浏览器访问某个图片logo.jpg作为例子来说明。我们的浏览器第一次访问网页的时候，浏览器通过互联网络向网站服务器发起一个HTTP请求。服务器得到请求后，将图片logo.jpg 反馈给浏览器。浏览器同时将logo.jpg写入浏览器缓存。
?
图：浏览器第一次访问 logo.jpg
图：浏览器第二次访问 logo.jpg
第二次访问logo.jpg的时候，浏览器会检查缓存，并且发现缓存里面存在 logo.jpg。 为了提高效率，浏览器会像服务器发送一个条件GET请求。如果logo.jpg没发生变化，服务器就会反馈一个很小的头，告诉浏览器不用从服务器下载，直接用缓存的logo.jpg就可以啦。也就是说，第二次请求 logo.jpg的时候，因为服务器反馈的不是完整的logo.jpg，而只是反馈了一个很小的头，真正的logo.jpg直接从浏览器缓存获取，所以节省了很多时间。
?
但我们观察到，在第二次访问logo.jpg的时候，浏览器和服务器之间还是有个一来一回和服务器互相喊话的过程。这个过程好像消耗不了多长时间，但如果我的网店首页有100张图片，每张图片都有一个来回，就是100个来回，也是一笔不小的时间消耗。有人会发问：
回答是：通过添加Expires头，就可以做到直接读取浏览器缓存，从而省掉上面的喊话过程。什么是Expires头呢？举一个例子，www.buyonme.com?首页包含LOGO图片是 logo.jpg，当我们第一次访问首页的时候，会发送一个HTTP请求logo.jpg。服务器会反馈一个HTTP响应（HTTP Response）给浏览器，告诉浏览器这个组件的过期时间。下次访问的时候，浏览器只要判断时间没有过期，就直接从缓存获取文件。
?
我们看到上图中有一行写着“Expires Tue, 01 Sep 2020 00:00:00 GMT”，这个就是Expires头。它的作用是告诉浏览器缓存，这个图片到2020年才过期。如果浏览器第二次访问这个图片，就根本不用向服务器喊话，更不用从服务器下载，而是直接读取缓存即可。如图6.33所示，定义Expires头的确省了时间。下面是包含expires header的浏览器行为：
?
后面会有系列文章，介绍如何设置Expires Headers，以及需要注意的问题。
?
作者:?谭砚耘@用户体验与可用性设计-科研笔记
版权属于:?谭砚耘 （TOTHETOP至尚国际?）
版权所有。转载时必须以链接形式注明作者和原始出处
如果你希望与作者交流，请发送邮件到?tanyanyun/at/163.com?别忘了修改小老鼠
1 楼 yoyo837 2011-12-27 内外好大压力啊 2 楼 yoyo837 2011-12-27 yoyo837 写道内外好大压力啊