我们要学会利用浏览器的缓存机制来减少对服务器的访问来,加快我们网页的加载速度,首先我们要先了解一下,关于浏览器缓存的一些基本概念。

以前,面试的时候被问到这样一道题,你认为天猫的首页是静态的还是动态的?

这里,其实就问的是,浏览器缓存。

1.浏览器在加载一个网页的时候,打开控制面板的network选项,就可以看到加载的一个个资源文件,后面还有加载这些文件的时间,其实,有一些文件是不需要每次都去访问服务器来加载的,比如网站的logo,像这些时间长不变的我们就可以把他们缓存到浏览器,下载访问的时候直接就从本地加载文件,不会访问服务器,这样可以加快浏览器的加载速度。

2.浏览器缓存分为俩大类,一个就是强缓存,还有一个就是协商缓存。
而我们控制缓存的方式就是通过修改请求消息的头部,或者响应消息的头部。

3.强缓存。

修改的是Cache-Control字段,控制资源文件是否被缓存。常用的有

Cache-control: no-cache 意味着文件的内容不应当被缓存。这在搜索或者翻页结果中非常有用,因为同样的URL,对应的内容会发生变化。

Cache-control:max-age:99999999 指定缓存过期的相对时间秒数。

它的缓存原理是:

浏览器第一次跟服务器请求一个资源,服务器会把Cache-Control的跟着资源返回来。

浏览器再请求这个资源时,先从缓存中寻找,找到这个资源后,根据它第一次的请求时间和Cache-Control设定的有效期,计算出一个资源过期时间,再拿这个过期时间跟当前的请求时间比较,如果请求时间在过期时间之前,就能命中缓存,否则就不行。

如果缓存没有命中,浏览器直接从服务器加载资源时,Cache-Control Header在重新加载的时候会被更新。

4.协商缓存

修改的是last-modified : Tue, 04 Apr 2017 21:05:15 GMT字段,表示这个资源在服务器上的最后修改时间,

它的缓存原理是:

当浏览器向服务器请求资源的时候,服务器会把时间随响应消息返回到浏览器。

当再次请求服务器的时候,浏览器会把last-modified传给服务器,服务器会比较一下该文件在服务器的最后修改时间A和浏览器发过来的时间B。

如果A<=B,那么就不会重新请求资源,否则,服务器就给客户端返回新的资源文件。