快速理解浏览器缓存

快速理解浏览器缓存知识。

浏览器缓存主要为两类：强缓存、协商缓存。

和缓存相关的HTTP头有6个。

强缓存：

• Cache-Control
• Expires

协商缓存:

• ETag和If-None-Match
• Last-Modified和If-Modified-Since

声明一点强缓存的优先级高于协商缓存，如果强缓存命中了，就不会走到协商缓存这一步了。
缓存一般是缓存js，css，图片这些静态资源。

下面来逐一讲解强缓存，和协商缓存。

强缓存

Expires

一般的响应头像这样

Expires:Sun, 30 Jul 2017 07:57:51 GMT

返回的是一个时间字符串，表示的是该资源的过期时间。是一个绝对时间，以服务器的时间为基准，所以可能造成以为客户端时间和服务端时间不同步而影响缓存的效果。

Cache-Control

一般的响应头像这样

Cache-Control:max-age=691200

返回的是一个相对时间，相对于客户端，单位为秒。所以如上该资源会在691200秒后过期。

注意： 当Expires和Cache-Control同时出现的时候Cache-Control的优先级更高。

浏览器缓存了整个静态资源，包括它的HTTP头部，当浏览器再次准备向服务器请求资源之前，会先比对缓存资源的HTTP头的两个强缓存字段，如果在不过期范围内，就不会向服务器请求，从而减少服务器负担。

协商缓存

在没有命中强缓存之后，浏览器就会向服务器发送一个请求，我叫它预请求。验证协商缓存是否可用。如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串。

ETAG

一般的响应头像这样

ETag:"6f9717ffeb215a8868bd882d8af19749"

浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上ETag的header，这个header是服务器根据当前请求的资源生成的一个唯一标识，这个唯一标识是一个字符串，只要资源有变化这个串就不同，跟最后修改时间没有关系。预请求的时候带上If-None-Match字段,值就是这个ETag，服务器接收后会重新生成一个ETag，如果没有修改过就返回304，这样就减少了从服务器上下载资源的负担。如果有变化，就正常返回资源内容。

Last-Modified和If-Modified-Since

一般的响应头像这样

Last-Modified:Tue, 18 Oct 2016 14:21:13 GMT

这一对的原理是这样的，第一次随静态资源返回一个响应头如上，和Expires一样是服务器的时间。预请求的时候带上If-Modified-Since字段,值就是这个过期时间，服务器接收后会比较这个时间和资源上次修改的时间，如果没有修改过就返回304，这样就减少了从服务器上下载资源的负担。如果修改了就返回新的Last-Modified字段。