浏览器缓存

什么是缓存?

当第一次访问网站的时候,比如www.baidu.com,电脑会图片,文件等下载下来,当第二次访问网站的时候,网站就会直接被加载出来.

缓存的好处?

• 减轻服务器压力,减少请求的放松.
• 提高性能,在本地打开资源肯定比在服务器上获取要快
• 减少宽带的消耗,当我们使用缓存时,只会产生很少的网络消耗

**浏览器缓存有俩种方式:**强缓存、协商缓存

浏览器缓存存储的地方：Service Worker、Memory Cache、Disk Cache、push Cache

缓存位置

1.Service Worker

是浏览器背后的独立线程，一般可以作为缓存。使用Service Worker，首先必须是HTTPS协议，因为Service Worker中间涉及到一些请求的拦截，所以必须要用HTTPS来保证安全。

Service Worker和其他浏览器缓存不同，它可以选择缓存那些文件，读取那些文件，并且还有持续性。

2.Memory Cache

是内存中的缓存，主要是当前页面已经下载过的资源，比如页面上已经下好的样式、脚本、图片之类。在内存中读取速度肯定比磁盘中快，内存虽然读取高效，但是持续性很短，随着进程的释放而释放，如果关闭tab页面就会消失。

3.Disk Cache

是硬盘中的缓存，他和Memory Cache相比，读取比内存的要慢，但是什么都能存储到硬盘上。在容量和时效性更好一些。

Disk Cache是浏览器大多会使用的，他会根据HTTP header上的字段来判断那些资源需要被缓存，那些缓存可以不用去请求，那些缓存过期需要重新请求。

如果一旦被硬盘缓存下来，就不会去请求数据，大多数的缓存都在Disk Cache

4.push Cache

是HTTP2中的内容，如果以上三种缓存都不是，就会使用push Cache，它的只会在session（会话)中出现，它的持续性也非常短，随着会话的结束就会被释放。一般在谷歌中，存储的时间也只有5分钟,而push Cache也并非遵从HTTP头中的缓存指令

缓存方式

1.强缓存

强缓存就是当URL访问页面时,不会去请求服务器,而是返回200,拿缓存中的资源进行渲染。

如何去设置强缓存？

当我们第一次进入页面的时候，会向服务器发送请求，通过服务器返回的响应头进行判断是否进行缓存，如果响应头中有 expries 或者 Cache-Control的字段就是强缓存，接着浏览器就将缓存存储在Memory Cache和Disk Cache。

当第二次进行请求，浏览器就会判断参数是否符合，如果符合就返回200状态码，渲染本地资源；否则就会把响应参数存在请求头，判断是否是协商缓存，如果是则返回304状态码，渲染缓存；否则就重新请求。

expries

是HTTP1.0控制页面缓存的字段，值为一个时间戳，服务器会返回到期时间，如果没有到期就从缓存拿数据，如果过期则重新请求

Cache-Control

是HTTP1.1控制页面缓存的字段，它的值有很多，当Cache-Control存在时，Cache-Control的优先级更高。

public：服务器和浏览器都可以缓存privite：只允许浏览器缓存no-store：都不缓存no-cache：可以缓存，但会立即失效max-stale=30  ：30s内,即使缓存过期也使用该缓存min-fresh=30  ：希望30s内获取最新的响应

pragma

这个是HTTP1.0中禁用网页缓存的字段，其取值为no-cache，和Cache-Control的no-cache效果一样。

2.协商缓存

协商缓存就是当强缓存失效后，会带这缓存标识去向服务器去请求，如果符合就返回304状态码，并且会更新缓存的标识；否则返回200，并重新请求数据。

协商缓存使用俩种HTTP header实现

• Last-Modified
• ETag

** Last-Modified**

浏览器发起请求访问目标资源，服务器在返回资源的同时，会在response header中添加 Last-Modified这个header，表示这个资源在服务器上的最后修改时间

浏览器下一次请求这个资源，浏览器检测到有 Last-Modified这个header，于是会添加If-Modified-Since这个header其值就是Last-Modified中的值

服务器再次收到这个资源请求，会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比

• 若服务器的资源最后被修改时间不等于于If-Modified-Since中的值的话就会将新的资源发送回来
• 否则返回 304 状态码

缺点：

• 如果本地打开缓存文件，即使没有对文件进行修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源
• Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成文件，那么服务端会认为资源还是命中了，不会返回正确的资源

因为以上这些弊端，所以在 HTTP / 1.1 出现了 ETag

ETag

Etag是服务器在响应请求时，返回的当前资源文件一个唯一标识(由服务器生成)，只要资源有变化，Etag就会重新生成

浏览器在向服务器发送请求时，会将上一次返回的Etag值放到请求头的If-None-Match字段里

服务端比较 If-None-Match 中的值跟目标资源的ETag是否一致

• 一致，响应状态码为304
• 不一致，响应状态码为200，并返回新的资源

特点：

• ETag 优先级比 Last-Modified 高
• ETag 是服务端通过算法计算得出，需要损耗一定时间