浏览器的强缓存与弱缓存

在浏览器众多缓存中的HTTP缓存可能不少人对这个的概念并无很清晰，每一个人都知道进入一次网页以后再刷新一次页面，加载速度会比首次加载快很是多，每一个人都知道这是浏览器缓存的magic，可是对此背后的缘由可能不甚了解...

当咱们在谈论HTTP缓存时咱们在谈论什么:

咱们其实是在谈论下面这两种状况:

如上图，浏览器对静态资源的HTTP缓存有两种状况，一种是强缓存(本地缓存)，另外一种是弱缓存(协商缓存)。

---

缓存流程：

浏览器第一次请求资源时：

浏览器第一次请求资源时，必须下载全部的资源，而后根据响应的header内容来决定，如何缓存资源。可能采用的是强缓存，也多是弱缓存

浏览器后续请求资源时的匹配流程：

由上图能够知道当浏览器请求一个静态资源时的HTTP流程：

1. 强缓存阶段：先在本地查找该资源，若是发现该资源，而且其余限制也没有问题(好比:缓存有效时间)，就命中强缓存，返回200，直接使用强缓存，而且不会发送请求到服务器
2. 弱缓存阶段：在本地缓存中找到该资源，发送一个http请求到服务器，服务器判断这个资源没有被改动过，则返回304，让浏览器使用该资源。
3. 缓存失败阶段(从新请求)：当服务器发现该资源被修改过，或者在本地没有找到该缓存资源，服务器则返回该资源的数据。

强缓存与弱缓存的区别：

获取资源形式： 都是从缓存中获取资源的。

状态码： 强缓存返回200(from cache),弱缓存返回304状态码

请求(最大区别)：

强缓存不发送请求，直接从缓存中取。

弱缓存须要发送一个请求，验证这个文件是否可使用（有没有被改动过）。

---

强缓存：

强缓存是利用Expires或者Cache-Control，让原始服务器为文件设置一个过时时间，在多长时间内能够将这些内容视为最新的。

若时间未过时，则命中强缓存，使用缓存文件不发送请求。

Cache-Control

Cache-Control 是http1.1中为了弥补Expires的缺陷而加入的，当Expires和Cache-Control同时存在时，Cache-Control优先级高于Expires。

选项：

可缓存性:

public： 服务器端和浏览器端都能缓存

private: 只能浏览器端缓存

no-cache: 强制浏览器在使用cache拷贝以前先提交一个http请求到源服务器进行确认。http请求没有减小，会减小一个响应体(文件内容),这种个选项相似弱缓存。

only-if-cached: 代表客户端只接受已缓存的响应，而且不要向原始服务器检查是否有更新的拷贝。

到期设置：

max-age=60：设置缓存存储的最大周期，超过这个时间缓存被认为过时(单位秒)。 这里是60秒

其余设置：

no-store: 不缓存，使用协商缓存

must-revalidate: 缓存必须在使用以前验证旧资源的状态，而且不可以使用过时资源。

更多设置，移动MDN

// 示例
Cache-Control: no-cache, no-store, must-revalidate
Cache-Control:public, max-age=31536000
Cache-Control: max-age=3600, must-revalidate

http1.0时代的缓存 Expires+Pragma

Expires用于设置缓存到期时间：

指定缓存到期GMT的绝对时间，若是设了max-age，max-age就会覆盖expires，若是expires到期须要从新请求。

Expires:Sat, 09 Jun 2018 08:13:56 GMT

有一个问题是因为使用具体时间，若是时间表示出错或者没有转换到正确的时区均可能形成缓存生命周期出错。

Pragma禁用缓存：

Pragma : no-cache 表示防止客户端缓存，须要强制从服务器获取最新的数据；

Pragma : no-cache  //只有这一个用法 禁用缓存，强制从服务器获取最新的数据；

强缓存命中 from memory cache & from disk cache

在测试的时候，看到命中强缓存时，有两种状态，200 (from memory cache) cache & 200 (from disk cache)，因而去找了一下这二者的区别：

memory cache: 将资源存到内存中，从内存中获取。

disk cache：将资源缓存到磁盘中，从磁盘中获取。

两者最大的区别在于：当退出进程时，内存中的数据会被清空，而磁盘的数据不会。

更详细的介绍推荐这篇文章

---

弱缓存：

若是强缓存时间过时，或者没有设置，致使未命中的话。就进入到了弱缓存的阶段了，

Last-Modified & if-modified-since:

Last-Modified与If-Modified-Since是一对报文头，属于http 1.0。

last-modified是web服务器认为文件的最后修改时间，last-modified是第一次请求文件的时候，服务器返回的一个属性。

Last-Modified: Sat, 09 Jun 2018 08:13:56 GMT

第二次请求这个文件时，浏览器把If-Modified-Since发送给服务器，询问该时间以后文件是否被修改过。

If-Modified-Since: Sat, 09 Jun 2018 08:13:56 GMT // 跟Last-Modified的值同样

ETag & If-None-Match

ETag与If-None-Match是一对报文，属于http 1.1。

ETag是一个文件的惟一标志符。就像一个哈希或者指纹，每一个文件都有一个单独的标志，只要这个文件发生了改变，这个标志就会发生变化。

ETag机制相似于乐观锁机制，若是请求报文的ETag与服务器的不一致，则表示该资源已经被修改过来，须要发最新的内容给浏览器。

ETag也是首次请求的时候，服务器返回的:

ETag: "8F759D4F67D66A7244638AD249675BE2" // 长这样

If-None-Match也是浏览器发送到服务器验证，文件是否改变的:

If-None-Match: "8F759D4F67D66A7244638AD249675BE2" // 跟ETag的值同样

Etag/lastModified过程以下:

1. 客户端第一次向服务器发起请求,服务器将附加Last-Modified/ETag到所提供的资源上去
2. 当再一次请求资源,若是没有命中强缓存,在执行在验证时,将上次请求时服务器返回的Last-Modified/ETag一块儿传递给服务器。
3. 服务器检查该Last-Modified或ETag，并判断出该资源页面自上次客户端请求以后还未被修改，返回响应304和一个空的响应体。

同时使用两个报文头:

同时使用这两个报文头，两个都匹配才会命中弱缓存，不然将从新请求资源。

Etag 主要为了解决 Last-Modified 没法解决的一些问题：

1. 一些文件也许内容并不改变(仅仅改变的修改时间)，这个时候咱们不但愿文件从新加载。（Etag值会触发缓存，Last-Modified不会触发）
2. If-Modified-Since能检查到的粒度是秒级的，当修改很是频繁时，Last-Modified会触发缓存，而Etag的值不会触发，从新加载。
3. 某些服务器不能精确的获得文件的最后修改时间。

---

用户操做行为与缓存

F5刷新致使强缓存失效。

ctrl+F5强制刷新页面强缓存，弱缓存都会失效。

如何设置？

通常是服务器端设置这些请求头的，我本身试了用阿里云服务器设置Cache-Control，设置一下很方便的。

---

小结

经过网络重复请求资源既缓慢，成本又高，缓存和重用之前获取的资源的能力成为优化性能很关键的一个方面,也是大厂面试时很频繁出现的内容，掌握好这块知识点是很是重要的，但愿本文能给你带来些收获。

文章若有不正确的地方欢迎各位路过的大佬鞭策！喜欢的话，赶忙点波订阅关注/喜欢。

鼓励我一下：

以为还不错的话，给个人项目点个star吧