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

转载自：https://www.jianshu.com/p/f331d5f0b979

浏览器在第一次加载网页后会进行缓存，在第二次以及以后加载时会快一点。但是之后还需要向服务器进行请求，看这期间网页有没有修改过，如果没有修改过就直接用缓存的，但是这样还是会进行一次http请求。 if-modified-since 和Response Headers中的last-modified来实现。
所以添加Expires头和Cache-Control用来节省这一次http请求以达到更快。

使用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文件更新的周期会短一点，可以设置一周或者一个月。

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

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