关于浏览器缓存:浏览器缓存机制

罕用的缓存

Memory Cache
Memory Cache 也就是内存中的缓存，次要蕴含的是以后中页面中曾经抓取到的资源, 例如页面上曾经下载的款式、脚本、图片等。读取内存中的数据必定比磁盘快, 内存缓存尽管读取高效，可是缓存持续性很短，会随着过程的开释而开释。一旦咱们敞开 Tab 页面，内存中的缓存也就被开释了。
那么既然内存缓存这么高效，咱们是不是能让数据都寄存在内存中呢？
这是不可能的。计算机中的内存肯定比硬盘容量小得多，操作系统须要精打细算内存的应用，所以能让咱们应用的内存必然不多。
须要留神的事件是，内存缓存在缓存资源时并不关怀返回资源的 HTTP 缓存头 Cache-Control 是什么值，同时资源的匹配也并非仅仅是对 URL 做匹配，还可能会对 Content-Type，CORS 等其余特色做校验。

Disk Cache
Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，然而什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。
在所有浏览器缓存中，Disk Cache 覆盖面根本是最大的。它会依据 HTTP Herder 中的字段判断哪些资源须要缓存，哪些资源能够不申请间接应用，哪些资源曾经过期须要从新申请。并且即便在跨站点的状况下，雷同地址的资源一旦被硬盘缓存下来，就不会再次去申请数据。绝大部分的缓存都来自 Disk Cache
浏览器会把哪些文件丢进内存中？哪些丢进硬盘中？
对于这点，网上说法不一，不过以下观点比拟靠得住：
对于大文件来说，大概率是不存储在内存中的，反之优先
以后零碎内存使用率高的话，文件优先存储进硬盘

资源自身大小数值
当 http 状态为 200 是实实在在从浏览器获取的资源，当 http 状态为 304 时该数字是与服务端通信报文的大小，并不是该资源自身的大小，该资源是从本地获取的

chrome 采取措施的准则
什么时候是 from memory cache 什么时候是 from disk cache 呢？
即哪些资源会放在内存当中，哪些资源浏览器会放在磁盘上呢，后果如下下表所示

不同浏览器策略是否统一
以上的数据及统计都是在 chrome 浏览器下进行的
在 Firefox 下并没有 from memory cache 以及 from disk cache 的状态展示
雷同的资源在 chrome 下是 from disk/memory cache，然而 Firefox 通通是 304 状态码
即 Firefox 下会缓存资源，然而每次都会申请服务器比照以后缓存是否更改，chrome 不申请服务器，间接拿过去用
这也是为啥 chrome 比拟快的起因之一吧，

强缓存

强缓存：不会向服务器发送申请，间接从缓存中读取资源，在 chrome 控制台的 Network 选项中能够看到该申请返回 200 的状态码，并且 Size 显示 from disk cache 或 from memory cache。强缓存能够通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

1.Expires
缓存过期工夫，用来指定资源到期的工夫，是服务器端的具体的工夫点。也就是说，Expires= 过期工夫。Expires 是 Web 服务器响应音讯头字段，在响应 http 申请时通知浏览器在过期工夫前浏览器能够间接从浏览器缓存取数据，而无需再次申请。
Expires 是 HTTP/1 的产物，受限于本地工夫，如果批改了本地工夫，可能会造成缓存生效。Expires: Wed, 22 Oct 2018 08:41:00 GMT 示意资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，须要再次申请。

2.Cache-Control
在 HTTP/1.1 中，Cache-Control 是最重要的规定，次要用于管制网页缓存。比方当 Cache-Control:max-age=300 时，则代表在这个申请正确返回工夫（浏览器也会记录下来）的 5 分钟内再次加载资源，就会命中强缓存。
3.Expires 和 Cache-Control 两者比照
其实这两者差异不大，区别就在于 Expires 是 http1.0 的产物，Cache-Control 是 http1.1 的产物，两者同时存在的话，Cache-Control 优先级高于 Expires；在某些不反对 HTTP1.1 的环境下，Expires 就会施展用途。所以 Expires 其实是过期的产物，现阶段它的存在只是一种兼容性的写法。
强缓存判断是否缓存的根据来自于是否超出某个工夫或者某个时间段，而不关怀服务器端文件是否曾经更新

协商缓存

协商缓存就是强制缓存生效后，浏览器携带缓存标识向服务器发动申请，由服务器依据缓存标识决定是否应用缓存的过程，次要有以下两种状况：、
1 协商缓存失效，返回 304 Not Modified，浏览器会去应用协商缓存
2 协商缓存生效，返回 200 和最小申请后果
协商缓存能够通过设置两种 HTTP Header 实现：Last-Modified 和 ETag

申请示例

返回示例

1.Last-Modified 和 If-Modified-Since
浏览器在第一次拜访资源时，服务器返回资源的同时，在 response header 中增加 Last-Modified 的 header，值是这个资源在服务器上的最初批改工夫，浏览器接管后缓存文件和 header；
Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT
浏览器下一次申请这个资源，浏览器检测到有 Last-Modified 这个 header，于是增加 If-Modified-Since 这个 header，值就是 Last-Modified 中的值；服务器再次收到这个资源申请，后盾代码会依据不同状况进行管制，会依据 If-Modified-Since 中的值与服务器中这个资源的最初批改工夫比照，如果没有变动，返回 304 和空的响应体，间接从缓存读取，如果 If-Modified-Since 的工夫小于服务器中这个资源的最初批改工夫，阐明文件有更新，于是返回新的资源文件和 200

2.ETag 和 If-None-Match
Etag 是服务器响应申请时，返回以后资源文件的一个惟一标识 (由服务器生成)，只有资源有变动，Etag 就会从新生成。浏览器在下一次加载资源向服务器发送申请时，后盾代码会依据不同状况进行管制，会将上一次返回的 Etag 值放到 request header 里的 If-None-Match 里，服务器只须要比拟客户端传来的 If-None-Match 跟本人服务器上该资源的 ETag 是否统一，就能很好地判断资源绝对客户端而言是否被批改过了。如果服务器发现 ETag 匹配不上，那么间接以惯例 GET 200 回包模式将新的资源（当然也包含了新的 ETag）发给客户端；如果 ETag 是统一的，则间接返回 304 知会客户端间接应用本地缓存即可
两者之间比照：
首先在精确度上，Etag 要优于 Last-Modified。
Last-Modified 的工夫单位是秒，如果某个文件在 1 秒内扭转了屡次，那么他们的 Last-Modified 其实并没有体现进去批改，然而 Etag 每次都会扭转确保了精度；如果是负载平衡的服务器，各个服务器生成的 Last-Modified 也有可能不统一。
第二在性能上，Etag 要逊于 Last-Modified，毕竟 Last-Modified 只须要记录时间，而 Etag 须要服务器通过算法来计算出一个 hash 值。
第三在优先级上，服务器校验优先思考 Etag

理论场景利用缓存策略

1. 频繁变动的资源
Cache-Control: no-cache

对于频繁变动的资源，首先须要应用 Cache-Control: no-cache 使浏览器每次都申请服务器，而后配合 ETag 或者 Last-Modified 来验证资源是否无效。这样的做法尽管不能节俭申请数量，然而能显著缩小响应数据大小。

2. 不常变动的资源
Cache-Control: max-age=31536000

通常在解决这类资源时，给它们的 Cache-Control 配置一个很大的 max-age=31536000 (一年)，这样浏览器之后申请雷同的 URL 会命中强制缓存。而为了解决更新的问题，就须要在文件名 (或者门路) 中增加 hash，版本号等动静字符，之后更改动静字符，从而达到更改援用 URL 的目标，让之前的强制缓存生效 (其实并未立刻生效，只是不再应用了而已)。
在线提供的类库 (如 jquery-3.3.1.min.js, lodash.min.js 等) 均采纳这个模式。

用户行为对浏览器缓存的影响

所谓用户行为对浏览器缓存的影响，指的就是用户在浏览器如何操作时，会触发怎么的缓存策略。次要有 3 种：
关上网页，地址栏输出地址：查找 disk cache 中是否有匹配。如有则应用；如没有则发送网络申请。
一般刷新 (F5)：因为 TAB 并没有敞开，因而 memory cache 是可用的，会被优先应用 (如果匹配的话)。其次才是 disk cache。
强制刷新 (Ctrl + F5)：浏览器不应用缓存（包含协商缓存与强缓存），因而发送的申请头部均带有 Cache-control: no-cache(为了兼容，还带了 Pragma: no-cache), 服务器间接返回 200 和最新内容。