前端性能-添加Expire头

当下的web页面包括很多的组件，包括scripts,styles,images等，而且在继续增长。第一次访问你的网页必须提交http请求，但是通过使用Expire头，可以使那些组件缓存在浏览器端。这样在后续页面浏览中避免了不必要的HTTP请求。

Expires头

浏览器用缓存来减少HTTP请求的数量和减少HTTP响应的大小，使web页面更快地加载。服务器使用Expires头来通知浏览器，它能够使用组件的当前缓存版本一直到指定的某一个时间点。在HTTP响应头中设置如下Expires头

Expires: Thu, 15 Apr 2010 20:00:00 GMT

Max-Age

提一下Expires的另一个选择:Cache-Control,Cache-Control头是为了解决了Expires一些限制在HTTP/1.1中引入的；因为Expires头使用一个指定的时间，它需要服务器和浏览器两端进行严格的时间同步，不是很理想；
Cache-Control使用max-age指令来指定组件可以被缓存多长时间，要是自从组件被请求并且缓存，到再次请求组件之间走过的秒数少于max-age指定的秒数，浏览器将使用缓存而不发送请求；如下指定了一个10年时长的max-age

Cache-Control: max-age=315360000

使用Cache-Control突破了Expires的限制，但是你可能还是想要使用Expires头以应对不支持HTTP/1.1的浏览器(虽然碰到不支持HTTP/1.1的浏览器的情况并不多)，你可以同时在响应头中设置Expires和Cache-Control max-age头，如果两者都被设置了，max-age指令讲覆盖Expires头。

重命名文件名

如果我们通过Cache-Control max-age或Expires头是浏览器和代理等直接使用组件的缓存，那么用户如何获取到组件的更新呢？当Expires头一旦设置，缓存版本将被使用到指定的过期时间点，浏览器不能够检查到任何的改变直到时间过期；

为了确保用户能够得到组件的最新版本，在你HTML文件中改变组件的文件名是一种非常不错的方式，一旦修改了组件的文件名，浏览器将直接重新下载；