🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
浏览器是如何知道使用缓存的,其实这都是通过http中,浏览器将最后修改时间发送请求给web服务器,web服务器收到请求后跟服务器上的文档最后修改的时间对比,如果web服务器上最新文档修改时间小于或者等于浏览器发送过来的,则发送304给浏览器,使用缓存版本。 一、缓存的概念: 缓存这个东西真的是无处不在, 有浏览器端的缓存, 有服务器端的缓存,有代理服务器的缓存, 有ASP.NET页面缓存,对象缓存。 数据库也有缓存, 等等。 http中具有缓存功能的是浏览器缓存,以及缓存代理服务器。 http缓存的是指:当Web请求抵达缓存时, 如果本地有“已缓存的”副本,就可以从本地存储设备而不是从原始服务器中提取这个文档。 二、缓存的好处: 每次访问网页,通常浏览器会从服务器下载所 需的资源,例如 HTML 文档、图片、CSS、JavaScript,甚至包括字体文件等。这里面的许多文件(例如图片)都是很少变动的,如果每次都要从服务器重新下载,会不必要 地增加网页载入时间,同时也会对服务器造成一定压力。通过合理配置缓存策略,可令浏览器以某种方式把这些静态的文件缓存起来,下次请求同一资源时,直接使 用本地存储的副本,而不是从服务器重新下载。 1、减少了冗余的数据传输,节省了网费。 2、减少了服务器的负担, 大大提高了网站的性能。 3、加快了客户端加载网页的速度。 现在基本上每个浏览器都有F12检查元素的功能,打开F12工具,选择“网络”,刷新页面,然后点击header头部选项,就可以清楚的看到浏览器向服务器发送各种请求的详情。如下图,是我这个个人博客首页的header头部信息,很清楚的看到,应用了缓存。 ![](https://box.kancloud.cn/7d4d8dad58ecaa04c2e0e93bd9d5ef05_827x499.jpg =800x600) 三、header头部与缓存有关的信息: 1、Resquest请求: Cache-Control:max-age=0以秒为单位; If-Modified-Since::Mon, 19 Nov 2012 08:38:01 GMT缓存文件的最后修改时间; If-None-Match: "0693f67a67cc1:0"缓存文件的Etag值; Cache-Control::no-cache不使用缓存; Pragma: no-cache不使用缓存。 2、Response响应: Cache-Control: public响应被缓存,并且在多用户间共享, Cache-Control: private响应只能作为私有缓存,不能在用户之间共享; Cache-Control:no-cache提醒浏览器要从服务器提取文档进行验证Cache-Control:no-store绝对禁止缓存(用于机密,敏感文件); Cache-Control: max-age=6060秒之后缓存过期(相对时间); Date: Mon, 19 Nov 2012 08:39:00 GMT当前response发送的时间; Expires: Mon, 19 Nov 2012 08:40:01 GMT缓存过期的时间(绝对时间); Last-Modified: Mon, 19 Nov 2012 08:38:01 GMT服务器端文件的最后修改时间; ETag: "20b1add7ec1cd1:0"服务器端文件的Etag值。 如果同时存在cache-control和Expires怎么办呢?浏览器总是优先使用cache-control,如果没有cache-control才考虑Expires。 四、如何判断缓存到用户本地的数据与服务器的数据是一致的,也就是本地缓存是否是最新的? 1、浏览器把缓存文件的最后修改时间通过 header ”If-Modified-Since“来告诉Web服务器。 第一步:浏览器客户端想请求一个文档, 首先检查本地缓存,发现存在这个文档的缓存, 获取缓存中文档的最后修改时间,通过: If-Modified-Since, 发送Request给Web服务器。 第二步:Web服务器收到Request,将服务器的文档修改时间(Last-Modified): 跟request header 中的,If-Modified-Since相比较, 如果时间是一样的, 说明缓存还是最新的, Web服务器将发送304 Not Modified给浏览器客户端, 告诉客户端直接使用缓存里的版本。如下图。 ![](https://box.kancloud.cn/4615dd4057ba7537db07476cdb9de0ff_683x241.jpg =800x300) 第三步:假如该文档已经被更新了。Web服务器将发送该文档的最新版本给浏览器客户端, 如下图。 ![](https://box.kancloud.cn/38d0a2f78035d1b7240cd70cfad327df_681x224.jpg =800x300) 2、浏览器把缓存文件的ETag, 通过header "If-None-Match", 来告诉Web服务器。 ETag是实体标签(Entity Tag)的缩写, 根据实体内容生成的一段hash字符串(类似于MD5或者SHA1之后的结果),可以标识资源的状态。 当资源发送改变时,ETag也随之发生变化。 ETag是Web服务端产生的,然后发给浏览器客户端。浏览器客户端是不用关心Etag是如何产生的。 为什么使用ETag呢? 主要是为了解决Last-Modified 无法解决的一些问题。 1、某些服务器不能精确得到文件的最后修改时间, 这样就无法通过最后修改时间来判断文件是否更新了。 2.、某些文件的修改非常频繁,在秒以下的时间内进行修改. Last-Modified只能精确到秒。 3.、一些文件的最后修改时间改变了,但是内容并未改变。 我们不希望客户端认为这个文件修改了(最常见的情况)。 通过比较ETag的值,来判断文件是否更新了,如下图。 ![](https://box.kancloud.cn/8d049595df26d6f17cf946389da68ad8_912x555.jpg =800x600) 五、禁止浏览器使用缓存的方法。 CTRL+F5强制刷新浏览器,或者设置IE。 可以让浏览器不使用缓存。原理过程是这样的: 第一步:浏览器发送Http request, 给Web 服务器, header中带有Cache-Control: no-cache,明确告诉Web服务器,客户端不使用缓存。 第二步:Web服务器将把最新的文档发送给浏览器客户端。 六、直接使用缓存,不去服务器验证,减少http请求。 按F5刷新浏览器和在地址栏里输入网址然后回车。 这两个行为是不一样的。 按F5刷新浏览器, 浏览器会去Web服务器验证缓存。 如果是在地址栏输入网址然后回车,浏览器会"直接使用有效的缓存", 而不会发http request 去服务器验证缓存,这种情况叫做缓存命中。 ![](https://box.kancloud.cn/7e4da033818f4c4a9c96ce7f96b441f8_676x215.jpg =800x300) 七、如何设置IE不使用缓存? 第一步:打开IE。点击工具栏上的, 工具->Internet选项->常规->浏览历史记录 设置. 选择“从不”。然后保存。 第二步:点击“删除” 把Internet临时文件都删掉 (IE缓存的文件就是Internet临时文件)。 ![](https://box.kancloud.cn/690006bde809f91531c99d9e909771c6_705x464.jpg =800x600) 八、公有缓存和私有缓存的区别。 1、Cache-Control: public 指可以公有缓存, 可以是数千名用户共享的。 2、Cache-Control: private 指只支持私有缓存, 私有缓存是单个用户专用的。 ![](https://box.kancloud.cn/07aa24665986eabaf11bd75f8eab8848_659x526.jpg =800x500)