对浏览器缓存的一些知识1.为什么要设置缓存：2.浏览器依据什么去判断缓存：3.如何不再缓存：4.强缓存与协商缓存：

57 阅读 0 评论 38 点赞

我是靠谱客的博主活泼嚓茶，最近开发中收集的这篇文章主要介绍对浏览器缓存的一些知识1.为什么要设置缓存：2.浏览器依据什么去判断缓存：3.如何不再缓存：4.强缓存与协商缓存：，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.为什么要设置缓存：

是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。

2.浏览器依据什么去判断缓存：

http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下，浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件，chrome控制台下的Frames即展示的是浏览器的http文件级缓存。以下是浏览器缓存的整个机制流程。主要是针对重复的http请求，在有缓存的情况下判断过程主要分3步：

判断expires（过期的绝对时间），如果未过期，直接读取http缓存文件，不发http请求，否则进入下一步；cache-control（缓存控制，为no-store即为真正的不缓存，设置过期的相对时间，max-age为最长时间）
判断是否含有etag（实体标签，唯一标识资源的任何东西，最便宜的获得就是时间戳，资源更改etag改变），有则带上if-none-match发送请求，未修改返回304，修改返回200。
判断是否含有last-modified，有则带上if-modified-since（上次更改日期）发送请求，无效返回200，有效返回304，否则直接向服务器请求，若时间>if-modified-since，就是改动过，200

注意：如果cache-control与expires同时存在的话，cache-control的优先级高于expires

cache-control的属性值：

根据是否可缓存分为
Public  指示响应可被任何缓存区缓存。
Private  指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的
部分响应消息，此响应消息对于其他用户的请求无效。
no-cache  指示请求或响应消息不能缓存（HTTP/1.0用Pragma的no-cache替换）
根据什么能被缓存
no-store  用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
根据缓存超时
max-age  指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
min-fresh  指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
max-stale  指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以
接收超出超时期指定值之内的响应消息。

Cache-Control: no-cache：这个很容易让人产生误解，使人误以为是响应不被缓存。实际上Cache-Control: no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。

Cache-Control: no-store：这个才是响应不被缓存的意思。

Pragma: no-cache：跟Cache-Control: no-cache相同，Pragma: no-cache兼容http 1.0 ，Cache-Control: no-cache是http 1.1提供的。因此，Pragma: no-cache可以应用到http 1.0 和http 1.1,而Cache-Control: no-cache只能应用于http 1.1.

Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：

一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；
某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；
某些服务器不能精确的得到文件的最后修改时间。

这时，利用Etag能够更加准确的控制缓存，因为Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符。

Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

3.如何不再缓存：

1. 插入时间戳，使每次的请求的参数都不同

var getTimestamp = new Date().getTime();

url = url+”&timestamp=”+getTimestamp;

2. 插入随机数

var t=Math.random()；

url = url+”&t=”+t;

3. 请求时在请求头

xmlHttpRequest.setRequestHeader(“cache-control”,”no-cache”);

防止location缓存方法也同样适用。

elem.location.href = a.html+parseInt(Math.random()*1000);

4. 设置html的meta标签

4.强缓存与协商缓存：

浏览器第一次请求：

之后的请求：

浏览器在第一次请求发生后，再次请求时：

浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息；本次请求根本就不会与服务器进行通信；在firebug下可以查看某个具有强缓存资源返回的信息，例如本地firebug查看的一个强缓存js文件

如果没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服务器根据请求中的相关header信息来比对结果是否协商缓存命中；若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容