首页 > 代码库 > 浏览器缓存机制-社招必问知识
浏览器缓存机制-社招必问知识
浏览器缓存总共有5个方法：
1.Pragma关键字，这是非HTTP协议定义的缓存机制，使用HTML Meta 标签，Web开发者可以在HTML页面的<head>节点中加入<meta>标签，代码如下：
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。使用上很简单，但只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析HTML内容本身。因此当服务器前面有代理缓存服务器存在时，pragma关键字不会有作用，意思就是会使用代理服务器上的缓存数据。
2.Expires策略。HTTP协议定义的缓存机制。Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。Expires返回来的过期日期是服务器的时间，是绝对时间。有可能客户端的时间跟服务器的时间不一致，会导致过期时间不准确。Expires （Pragma也是）是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1。但是HTTP 1.1兼容HTTP 1.0的东西。因此也可以使用Expires策略。
3.Cache-control策略。HTTP1.1协议定义的缓存机制。控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。其优先级高于Expires。Cache-control有很多设置的值，最常用的是max-age，它是相对时间，比如：cache-control:max-age=300，意思就代表300秒之内的正常浏览器请求（不是使用F5，CTRL+F5刷新），可以使用浏览器缓存。cache-control有很多关键字设置，如果要进大公司就必须知道这些关键字的意义。因此校招生可以略过：
public (仅为响应标头)
指示响应可被任何缓存区缓存。没过期时，每次请求都取缓存。
private (仅为响应标头)
指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。被缓存在私有缓存中，此响应消息对于其他用户的请求无效（不会使用缓存）。
跟must-revalidate一样，没过期时，第一次需要验证服务器。
no-cache (请求，响应都有)
指示请求不使用缓存，它必须与源服务器校验。会存储返回的数据。每次都验证服务器。会考虑服务器缓存验证。
no-store (请求，响应都有)
指示请求不使用缓存，并且不存储返回的数据。每次都验证服务器。且request并没有发送"If-Modified-Since"和"If-None-Match"头，不会考虑服务器缓存验证。
max-stale (请求，响应都有)
如果max-stale后面带有值，则客户端不能接受过期时间超过这个值的响应，如果没有值，则可以接受任何时候的过期响应。意思是,我允许缓存者，发送一个,过期不超过指定秒数的（max-stale）,陈旧的缓存给我。
min-fresh (仅为请求标头)
客户机可以接收响应时间小于当前时间加上指定时间的响应（缓存的过期时间）。也就是说：min-fresh:300秒，当前时间是2014-4-15 14:14:20 那么，如果缓存的过期时间大于当前时间+300秒，就用缓存，如果小于，则请求服务器，不使用缓存。
must-revalidate (仅为响应标头)
当一个must-revalidate 指令出现在响应中时，cache 在首先从源头服务器那里重新刷新之前，不可以使用这个不新鲜的条目。
如果缓存没过期，第一次请求时（用户之前请求过服务器，并且缓存了数据，并且关闭了浏览器窗口，然后用户再一次打开浏览器，访问同一服务器，由于缓存没过期，正常情况会使用缓存，但是由于有must-revalidate ，因此被标为第一次请求。），浏览器重新发送请求到服务器（服务器验证）；此后，浏览器呈现来自缓存的页面。
如果缓存过期，并且向服务器验证时，服务器无法连接上，这时不允许返回一个不新鲜的缓存副本，而会返回504网关超时错误。
Cache-Control : no-transform (请求，响应都有)
当用户请求或者响应时，文件都不应该被转换格式。
.only-if-cached:(仅为请求标头)
请求:告知缓存者,我希望内容来自缓存，我并不关心被缓存响应,是否是新鲜的.
.s-maxage(仅为响应标头)
响应:与max-age的唯一区别是,s-maxage仅仅应用于共享缓存.而不引用于用户代理的本地缓存,等针对单用户的缓存. 另外,s-maxage的优先级要高于max-age.
.cache-extension (请求，响应都有)
(cache-extension是一个泛化的代称.它指所有自定义，或者说扩展的,指令,客户端和服务器端都可以自定义扩展Cache-Control相关的指令.) 那么,实际上我们可以这样 Cache-Control:max-age=300, custom-directive = xxx, public. 这样我们就定义了一个被统称为cache-extension的扩展指令.该指令如果对应的客户端或服务器端，不认识,就会忽略掉.
.proxy-revalidate(仅为响应标头)
响应:限制上与must-revalidate类似.区别在于受体的范围.proxy-revalidate,是要排除掉用户代理的缓存的.即，其规则并不应用于用户代理的本地缓存上.
4.Last-Modified/If-Modified-Since
服务端的缓存验证机制，这是http1.0的缓存机制。 Last-Modified：标示这个响应资源的最后修改时间（绝对时间）。web服务器在响应请求时，告诉浏览器资源的最后修改时间。 If-Modified-Since：当资源过期时（使用Cache-Control标识的max-age，或者expires过期时），发现资源具有Last-Modified声明，则再次向web服务器请求时，带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since， 则与被请求资源的最后修改时间进行比对。若最后修改时间较新（与If-Modified-Since的时间不同），说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧（与If-Modified-Since的时间相同），说明资源无新修改，则响应HTTP 304 (无需包体，节省流量)，告知浏览器继续使用所保存的cache。
缺点：Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间。
如果某些文件会被定期生成，有时，当内容没有任何变化，但Last-Modified改变了，使用此缓存机制，会返回200，并告知浏览器你缓存的文件不是最新的（其实内容是一样的，只是时间不一样），增加流量。
有可能存在服务器没有准确获取文件最后修改的时间，导致此缓存机制没有起到作用。或者与代理服务器时间不一致等情形（这里点到为止，代理服务器，反向代理服务器，CDN等，这些都有可能缓存数据，都有可能时间不一致，这里面试官不会问，即便问了，面试官也不会非常清楚）。
5.Etag/If-None-Match
服务端的缓存验证机制，这是http1.1的缓存机制。优先级大于Last-Modified。服务器会优先验证ETag。
Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定，一般就是hash值）。
If-None-Match：当资源过期时（使用Cache-Control标识的max-age或者expires过期时），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。
这是从别人那里弄来的一张图，只验证了F5和Ctrl+F5.
用户操作 | Expires/Cache-Control | Last-Modified/Etag |
地址栏回车 | 有效 | 有效 |
页面链接跳转 | 有效 | 有效 |
新开窗口 | 有效 | 有效 |
前进、后退 | 有效 | 有效 |
F5刷新 | 无效 | 有效 |
Ctrl+F5刷新 | 无效 | 无效 |
加油！
浏览器缓存机制-社招必问知识