浏览器缓存机制之强缓存与协商缓存

浏览器缓存基本认识

浏览器缓存分为强缓存和协商缓存： 浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存若是命中，浏览器直接从本身的缓存中读取资源，不会发请求到服务器。

当强缓存没有命中的时候，浏览器必定会发送一个请求到服务器，经过服务器端依据资源的另一些http header验证这个资源是否命中协商缓存，若是协商缓存命中，服务器会将这个请求返回，可是不会返回这个资源的数据，而是告诉客户端能够直接从缓存中加载这个资源，因而浏览器就又会从本身的缓存中去加载这个资源；

强缓存与协商缓存的共同点是：

若是命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；

区别是：

强缓存不发请求到服务器，协商缓存会发请求到服务器。 当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据。

强缓存的原理

当浏览器对某个资源的请求命中了强缓存时，返回的http状态为200，则直接从缓存中取出资源

强缓存是利用Expires或者Cache-Control这两个http response header实现的，它们都用来表示资源在客户端缓存的有效期。

Expires

Expires是http1.0提出的一个表示资源过时时间的header，它描述的是一个绝对时间，由服务器返回，

1. 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Expires的header，如：

   

2. 浏览器在接收到这个资源后，会把这个资源连同全部response header一块儿缓存下来（因此缓存命中的请求返回的header并非来自服务器，而是来自以前缓存的header）
3. 浏览器再请求这个资源时，先从缓存中寻找，找到这个资源后，拿出它的Expires跟当前的请求时间比较，若是请求时间在Expires指定的时间以前，就能命中缓存，不然就不行。
4. 若是缓存没有命中，浏览器直接从服务器加载资源时，Expires Header在从新加载的时候会被更新。 Expires是较老的强缓存管理header，因为它是服务器返回的一个绝对时间，在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，好比随意修改下客户端时间，就能影响缓存命中的结果。

Cache-Control

1. 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Cache-Control的header，
2. 浏览器在接收到这个资源后，会把这个资源连同全部response header一块儿缓存下来；
3. 浏览器再请求这个资源时，先从缓存中寻找，找到这个资源后，根据它第一次的请求时间和Cache-Control设定的有效期，计算出一个资源过时时间，再拿这个过时时间跟当前的请求时间比较，若是请求时间在过时时间以前，就能命中缓存，不然就不行。
4. 若是缓存没有命中，浏览器直接从服务器加载资源时，Cache-Control Header在从新加载的时候会被更新。 Cache-Control描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，因此相比较Expires，Cache-Control的缓存管理更有效，安全一些。

协商缓存的原理

当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，若是协商缓存命中，请求响应返回的http状态为304而且会显示一个Not Modified的字符串

协商缓存是利用的是Last-Modified，If-Modified-Since和ETag、If-None-Match这两对Header来管理的。

Last-Modified，If-Modified-Since

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

   

2. 浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值
3. 服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，若是没有变化则返回304 Not Modified，可是不会返回资源内容；若是有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，由于既然资源没有变化，那么Last-Modified也就不会改变，
4. 浏览器收到304的响应后，就会从缓存中加载资源。
5. 若是协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified Header在从新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值。 Last-Modified，If-Modified-Since都是根据服务器时间返回的header，通常来讲，在没有调整服务器时间和篡改客户端缓存的状况下，这两个header配合起来管理协商缓存是很是可靠的，可是有时候也会服务器上资源其实有变化，可是最后修改时间却没有变化的状况，而这种问题又很不容易被定位出来，而当这种状况出现的时候，就会影响协商缓存的可靠性。因此就有了另一对header来管理协商缓存，这对header就是ETag、If-None-Match

ETag、If-None-Match

1. 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上ETag的header，这个header是服务器根据当前请求的资源生成的一个惟一标识，这个惟一标识是一个字符串，只要资源有变化这个串就不一样，跟最后修改时间没有关系，因此能很好的补充Last-Modified的问题：
2. 浏览器再次跟服务器请求这个资源时，在request的header上加上If-None-Match的header，这个header的值就是上一次请求时返回的ETag的值
3. 服务器再次收到资源请求时，根据浏览器传过来If-None-Match和而后再根据资源生成一个新的ETag，若是这两个值相同就说明资源没有变化，不然就是有变化；若是没有变化则返回304 Not Modified，可是不会返回资源内容；若是有变化，就正常返回资源内容。与Last-Modified不同的是，当服务器返回304 Not Modified的响应时，因为ETag从新生成过，response header中还会把这个ETag返回，即便这个ETag跟以前的没有变化
4. 浏览器收到304的响应后，就会从缓存中加载资源。

强缓存与协商缓存的区别：

协商缓存跟强缓存不同，强缓存不发请求到服务器，因此有时候资源更新了浏览器还不知道，可是协商缓存会发请求到服务器，因此资源是否更新，服务器确定知道。
大部分web服务器都默认开启协商缓存，并且是同时启用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】，

刷新对缓存的影响：

1. 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；
2. 当f5刷新网页时，跳过强缓存，可是会检查协商缓存；
3. 浏览器地址栏中写入URL，回车 浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿。（最快）

上述文章仅为我的总结梳理用，若是有错误，欢迎在评论中留言指正~