YSLOW性能测试前端调优23大规则(3)添加Expires头

正常如果要访问的组件，都必须建立相对应的HTTP请求从服务器端查找所需要的组件，这样每次访问都得重新从服务器读取信息，为了提高性能我们想出一种方法，如果可以使用浏览器或代理的缓存来减少HTTP请求的数量，这就是这节要介绍的Expires头。

通过添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能，能在后续页面中有效避免一些不必要的HTTP请求，Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本，直到指定的时间为止。

例如：Expires：Thu，16 Apr 2018 20：00：00 GMT; 他告诉浏览器缓存有效性持续到2018年4月16日为止，在这个时间之内相同的请求使用缓存，这个时间之外使用http请求。

浏览器第一次访问服务器的过程如图所示。

Expires有一个非常大的缺陷，它使用一个固定的时间，要求服务器与客户端的时钟保持严格的同步，并且这一天到来后，服务器还得重新设定新的时间。

HTTP1.1引入了Cathe-Control，它使用max-age指定组件被缓存多久，它以秒为单位定义一个更新窗，如果从组件被请求开始所花费的时间少于max-age，浏览器就使用缓存中的版本，这就可以避免额外的HTTP请求，消除Expires的限制。

Max-age工作原理如图所示。

只有在用户已经访问过网站之后，长久的 Expires头才会对页面浏览产生影响。当用户第一次访问你的网站时，它不会对HTTP请求的数据产生任何影响，因为此时浏览器的缓存是空的。因此，对网站性能的改进取决于用户在访问页面时是否有完整缓存。

通常我们在说“空缓存”或“完整缓存”时，指的是与页面相关的浏览器缓存状态。如果页面中的组件没有放在缓存中，则缓存为“空”，浏览器的缓存可能包含来自其它网站的组件，但这页面没有帮助。反之，如果页面中的可缓存组件都在缓存中，则缓存是“完整的”。