|
为啥要知道浏览器缓存？为了更好的进行 性能优化。
回答面试的话：
服务器首先通过Cache-Control验证强缓存是否有效，
- 如果强缓存有效，直接使用；
- 否则进入协商缓存，即发送HTTP请求，服务器通过请求头中的
If-Modified-Since或者If-None-Match字段检查资源是否更新，
- 如果资源更新，返回最新资源和200状态码，
- 否则返回304，告诉浏览器直接从缓存获取资源。
如果想了解更多，可以继续往下看哦，要慢慢品，理解了会发现：天空飘来五个字，这都不是事，，哈哈。。。。。
1. 强缓存
HTTP/1.1使用Cache-Control字段检查强缓存是否有效，，如果强缓存有效，直接使用强缓存，就不需要发送HTTP请求了。（HTTP/1.0使用的是Expires字段）
Cache-Control：
? 存在于服务器返回的响应头中（Cache-Control:max-age=3600）,代表这个响应返回后在1小时内可以直接使用强缓存，如果超过1小时强缓存失效，就需要进入协商缓存了。（除了max-age属性还有其他属性，自行了解）
2. 协商缓存
强缓存失效后，浏览器给服务器发请求（在请求头中携带相应的缓存Tag），服务器根据这个Tag,告诉浏览器是使用缓存，还是返回给浏览器新的资源。
Tag有两种：
-
第一种：Last-Modified（服务器资源当时最新的更改时间） ? 在浏览器第一次给服务器发请求时，服务器会在响应头中加上If-Modified-Since字段，再次发送请求时，拿这个时间跟服务器资源最近的更新更新时间比较，如果在最新的更新时间之前，即缓存中的资源不是最新的了，就返回新的资源，否则返回304，告诉六拉起直接使用缓存。 -
第二种：ETag（服务器给当时资源生成的唯一标识） ? 在浏览器第一次给服务器发请求时，服务器给这个响应资源生成一个唯一标识，浏览器再次请求时，将这个值作为If-None-Match这个字段的内容，放到请求头中，发给服务器，服务器拿这个值给该资源最近更新时生成的唯一标识ETag进行对比，如果两者不一致，即缓存中的资源不是最新的了，返回新的资源给浏览器，如果一致，则返回304，告诉浏览器直接使用缓存。 两种Tag对比：
-
在精度上，ETag优于Last-Modified。ETag是按照内容给资源上标识，因此能准确感知资源的变化，而Last-Modified在一些特殊情况下不能准确感知资源的变化，以下两种情况：
- 情况1：编辑了资源文件，但是文件的内容并没有改变，Last-Modified时间会改成最新的，这样跟
if-modified-since对比，就会不一致，不能使用缓存了，造成强缓存失效 - 情况2：Last-Modified能够感知的单位时间时秒，如果文件在1秒内改变了很多次，那么这时候Last-Modified并不会改变，还是会使用强缓存
-
在性能上，Last-Modified优于ETag,Last-Modified仅仅只是记录一个时间点，而ETag还需要根据文件的具体内容生成哈希值。 -
如果两种方式都支持，服务器有优先考虑ETag。
3. 缓存位置
上面我们知道，当强缓存命中或者协商缓存中服务器返回304的时候，浏览器可以直接从缓存中获取资源，那么这些资源存在什么位置呢？
浏览器中的缓存位置一共分为四种，按优先级从高到低：
-
- Service Worker
- Memory Cache
- Disk Cache
- Push Cache
Service Worker
Service Worker 借鉴了 Web Worker的 思路，即让 JS 运行在主线程之外，由于它脱离了浏览器的窗体，因此无法直接访问DOM。虽然如此，但它仍然能帮助我们完成很多有用的功能，比如离线缓存、消息推送和网络代理等功能。其中的离线缓存就是 Service Worker Cache。
Service Worker 同时也是 PWA 的重要实现机制，关于它的细节和特性，我们将会在后面的 PWA 的分享中详细介绍。
Memory Cache 和 Disk Cache
Memory Cache指的是内存缓存，从效率上讲它是最快的。但是从存活时间来讲又是最短的，当渲染进程结束后，内存缓存也就不存在了。
Disk Cache就是存储在磁盘中的缓存，从存取效率上讲是比内存缓存慢的，但是他的优势在于存储容量和存储时长。
好，现在问题来了，既然两者各有优劣，那浏览器如何决定将资源放进内存还是硬盘呢？主要策略如下：
- 比较大的JS、CSS文件会直接被丢进磁盘，反之丢进内存
- 内存使用率比较高的时候，文件优先进入磁盘
Push Cache
即推送缓存，这是浏览器缓存的最后一道防线。它是 HTTP/2 中的内容，虽然现在应用的并不广泛，但随着 HTTP/2 的推广，它的应用越来越广泛。
|