原文地址我们要学会利用浏览器的缓存机制来减少对服务器的访问来，加快我们网页的加载速度，首先我们要先了解一下，关于浏览器缓存的一些基本概念。
以前，面试的时候被问到这样一道题，你认为天猫的首页是静态的还是动态的？
这里，其实就问的是，浏览器缓存。
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，那么就不会重新请求资源，否则，服务器就给客户端返回新的资源文件。
网友评论