前端性能-添加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文件中改变组件的文件名是一种非常不错的方式,一旦修改了组件的文件名,浏览器将直接重新下载;

你可能感兴趣的