前提知识

浏览器加载资源时先看是否命中强缓存，若命中则不会发送http请求直接使用本地资源
若未命中则发送http请求，看是否命中强缓存，若命中则不返回资源，使用本地资源，此时相应的状态码为304
若未命中强缓存则返回资源，此时相应状态码为200

强缓存：


expire：GMT格式     （过期日期）   http1.0


cache-control：                  http1.1

— max-age=时间戳  （保质期）
expire和cache-control同时存在时，cache-control优先级更高


协商缓存：
（1）http1.0

last-modified:       GMT格式     在响应头中，只精确到秒
if-modified-since:   GMT格式     在请求头中，（值和last-modified完全一样）

（2）http1.1

Etag ：         一个唯一标志     在响应头中
if-none-match    一个唯一标志     在请求头中

（2）组能解决（1）解决不了的问题：

当服务器一些文件丢失后恢复，但文件完全没有修改，此时可以用缓存，但对于last-modified，最后修改时间已变，无法命中缓存；而Etag不会改变，可以命中缓存
last-modified只能精确到秒，而etag文件一修改就会变化， 不会命中缓存，能得到最新数据。

1、浏览器缓存

缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是怎么玩的，让大家有个大概的认知。

浏览器第一次请求时：



浏览器后续在进行请求时：



 

 从上图可以知道，浏览器缓存包含两种类型，即强缓存（也叫本地缓存）和协商缓存，浏览器在第一次请求发生后，再次请求时：

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



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

 
			
获取资源形式
			
状态码
			
发送请求到服务器
		
强缓存
			
 从缓存取
			
 200（from cache）
			
否，直接从缓存取
		
协商缓存
			
 从缓存取
			
 304（not modified）
			
是，正如其名，通过服务器来告知缓存是否可用
		
 

2、强缓存相关的header字段

强缓存上面已经介绍了，直接从缓存中获取资源而不经过服务器；与强缓存相关的header字段有两个：

expires，这是http1.0时的规范；它的值为一个绝对时间的GMT格式的时间字符串，如Mon, 10 Jun 2015 21:31:12 GMT，如果发送请求的时间在expires之前，那么本地缓存始终有效，否则就会发送请求到服务器来获取资源

	 
	
cache-control：max-age=number，这是http1.1时出现的header信息，主要是利用该字段的max-age值来进行判断，它是一个相对值；资源第一次的请求时间和Cache-Control设定的有效期，计算出一个资源过期时间，再拿这个过期时间跟当前的请求时间比较，如果请求时间在过期时间之前，就能命中缓存，否则就不行；cache-control除了该字段外，还有下面几个比较常用的设置值：

	 
	
no-cache：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。

		 
		
no-store：直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。

		 
		
public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。

		 
		
private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。
	
　　注意：如果cache-control与expires同时存在的话，cache-control的优先级高于expires

3、协商缓存相关的header字段

协商缓存都是由服务器来确定缓存资源是否可用的，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问，这主要涉及到下面两组header字段，这两组搭档都是成对出现的，即第一次请求的响应头带上某个字段（Last-Modified或者Etag），则后续请求则会带上对应的请求字段（If-Modified-Since或者If-None-Match），若响应头没有Last-Modified或者Etag字段，则请求头也不会有对应的字段。

Last-Modified/If-Modified-Since

	二者的值都是GMT格式的时间字符串，具体过程：
	

		
浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间

			 
			
浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值

			 
			
服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response header

			 
			
浏览器收到304的响应后，就会从缓存中加载资源

			 
			
如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified的Header在重新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值

			 
		
	
	
Etag/If-None-Match

	这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与Last-Modified/If-Modified-Since类似，与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化。

	 
　4、既生Last-Modified何生Etag

　　你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：


	
一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；
	
	

	
某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；
	
	

	
某些服务器不能精确的得到文件的最后修改时间。
	
这时，利用Etag能够更加准确的控制缓存，因为Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符。

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

5、用户的行为对缓存的影响

盗用网上的一张图，基本能描述用户行为对缓存的影响



6、强缓存如何重新加载缓存缓存过的资源

上面说到，使用强缓存时，浏览器不会发送请求到服务端，根据设置的缓存时间浏览器一直从缓存中获取资源，在这期间若资源产生了变化，浏览器就在缓存期内就一直得不到最新的资源，那么如何防止这种事情发生呢？

通过更新页面中引用的资源路径，让浏览器主动放弃缓存，加载新资源。

类似下图所示：



这样每次文件改变后就会生成新的query值，这样query值不同，也就是页面引用的资源路径不同了，之前缓存过的资源就被浏览器忽略了，因为资源请求的路径变了。

 

文章转载自：http://www.cnblogs.com/wonyun/p/5524617.html

 

在前端性能优化中就需要用到强缓存以及协商缓存来减少资源的请求以及流量的消耗

 

本篇文章只讲理念，之后有时间再说一下强缓存和协商缓存的实践

 

首先当我们打开页面时就会加载资源（css,js,img），然后浏览器就会缓存这些资源文件，而强缓存就是设置资源的响应头里面的过期时间为几个月或者几年（这个响应头是需要服务端的同学配合设置的）

比如我随意打开一个网站的资源，查看它的响应头，可以看到这里设置了expires  2020年才过期



这样，浏览器第一次的时候会向服务端请求资源，然后把资源缓存，之后如果再加载到相同的资源文件，就不会再向服务端发起请求，而是从缓存里面找文件，直到文件的缓存时间过期 或者Ctrl+F5强制刷新页面才会向服务器请求

应用场景

比如你网站的图片已经确定十几年都不会变化，那么就可以设置它的过期时间久一点，这样就减少了http请求。

 

协商缓存

就是指每次请求资源的时候先与服务端进行验证，判断文件有没有被修改过，如果修改过，就从服务端获取修改后的，最新的资源文件

如果没有修改过，那么就从缓存中读取文件

如图，last-modified表示的就是文件的最近修改时间



在nginx 中设置

add_header Cache-Control no-cache;

即可让资源文件使用协商缓存

 

总而言之，强缓存就是设置一个时间，浏览器在该时间内的资源访问都不会再向服务端发起请求，而是使用缓存中的资源文件

协商缓存则是每次请求资源都向服务端协商，询问服务端文件是否被修改，有改则改，没有改动就用缓存文件

 

 

目录

cache-control

强缓存：

协商缓存：

http1.0

http1.1

cache-control

 

private：客户端可以缓存

public：客户端和代理服务器均可缓存；

max-age=xxx：缓存的资源将在 xxx 秒后过期；

no-cache：需要使用协商缓存来验证是否过期；

no-store：不可缓存

must-revalidate:使用 must-revalidate 指令，代理会向源服务器再次验证即将返回的响应缓存目前是否仍有效。另外，使用 must-revalidate 指令会忽略请求的 max-stale 指令。

proxy-revalidate：指令要求所有的缓存服务器在接收到客户端带有该指令的请求返回响应之前，必须再次验证缓存的有效性

s-maxage：缓存的生存时间可以使用新的“s-maxage”（s 是 share 的意思，注意 maxage 中间没有“-”），只限定在代理上能够存多久，而客户端仍然使用“max-age”。

no-transform：代理有时候会对缓存下来的数据做一些优化，比如把图片生成 png、webp 等几种格式，方便今后的请求处理，而“no-transform”就会禁止这样做，不许“偷偷摸摸搞小动作”。



 

强缓存：

强制缓存只有首次请求才会跟服务器通信，读取缓存资源时不会发出任何请求，资源的 Status 状态码为 200，资源的 Size 为 from memory 或者 from disk ，http 1.1 版本的实现优先级会高于 http 1.0 版本的实现。



 

协商缓存：

协商缓存每次请求都会与服务器交互，第一次是拿数据和标识的过程，第二次开始，就是浏览器询问服务器资源是否有更新的过程。每次请求都会传输数据，如果命中缓存，则资源的 Status 状态码为 304 而不是 200 。同样的，一般来讲为了兼容，两个版本的协商缓存都会被实现，http 1.1 版本的实现优先级会高于 http 1.0 版本的实现。

 

http1.0 服务器：Last-Modified 客户端：If-Modified-Since

http1.1 服务器：Etag 客户端：If-None-Match

http 1.1 版本的实现优先级会高于 http 1.0 版本的实现

 

http1.0

在 http 1.0 版本中，第一次请求资源时服务器通过 Last-Modified 来设置响应头的缓存标识，并且把资源最后修改的时间作为值填入，然后将资源返回给浏览器。在第二次请求时，浏览器会首先带上 If-Modified-Since 请求头去访问服务器，服务器会将 If-Modified-Since 中携带的时间与资源修改的时间匹配，如果时间不一致，服务器会返回新的资源，并且将 Last-Modified 值更新，作为响应头返回给浏览器。如果时间一致，表示资源没有更新，服务器返回 304 状态码，浏览器拿到响应状态码后从本地缓存数据库中读取缓存资源。

 

这种方式有一个弊端，就是当服务器中的资源增加了一个字符，后来又把这个字符删掉，本身资源文件并没有发生变化，但修改时间发生了变化。当下次请求过来时，服务器也会把这个本来没有变化的资源重新返回给浏览器。

 

http1.1

在 http 1.1 版本中，服务器通过 Etag 来设置响应头缓存标识。Etag 的值由服务端生成。在第一次请求时，服务器会将资源和 Etag 一并返回给浏览器，浏览器将两者缓存到本地缓存数据库。在第二次请求时，浏览器会将 Etag 信息放到 If-None-Match 请求头去访问服务器，服务器收到请求后，会将服务器中的文件标识与浏览器发来的标识进行对比，如果不相同，服务器返回更新的资源和新的 Etag ，如果相同，服务器返回 304 状态码，浏览器读取缓存