【JavaScript】浏览器的缓存策略：强缓存和协商缓存

通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的。

强缓存（如果命中就不会去请求服务器，返回状态码200）

如何设置强缓存？

1，设置http头：Cache-Control，以客户端相对时间为准

Cache-Control:max-age=3600（单位是秒）。

2，expires（http1.0产物）会将资源的实效日期告知客户端。
Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，如果用户更改了本地时间，就有可能造成误差

当同时设置cache-control和expires时，会优先使用cache-control

协商缓存（如果资源没有做改变，那么服务端就会返回 304 状态码 Not Modify）

1，If-Modified-since（请求）Last-Modified （响应），
首次请求服务器会返回资源的更新时间，
以后请求会在请求头携带if-modified-since中带着这个时间，如果资源发生了更新，则返回新资源

2，If-None-Match（请求）和ETag （响应）
eg：
第一次客户端想服务器请求一个index.css，第一次响应时，服务器会在响应头添加： Etag: ‘value’
这个value一般是index.css的md5值。 value = md5(index.css)
第二次去请求index.css的时候浏览器会带着一个请求头： if-nont-match: ‘value’
服务器就可以在后台比对 if-nont-match请求头和上一次etag的区别：如果相同就返回304，Not Modify，如果不同就返回新的资源，并重新设置Etag的值

两者的区别：

Etag和Catche-Control的区别：
Etag再次请求了服务器，如果etag和if-none-match相等就不下载文件内容，强缓存如果命中，根本就不会发起请求