今天被一个后端同学给问住了，为什么200状态码后面有一个from memary cache？一时竟然答不上来。为了彻底搞懂浏览器缓存，决定深入研究下。本次以chrome浏览器为例：

浏览器缓存分为两类：

1.强制缓存

2.协商缓存：也有称作“对比缓存”

首先强制缓存和协商缓存，都是指HTTP的缓存--即发生在应用层

强制缓存：

用户发送的请求，直接从客户端缓存中获取，不发送请求到服务器，不与服务器发生交互行为

协商缓存：

用户发送的请求，发送到服务器后，由服务器判定是否从缓存中获取资源

共同点：强制缓存和协商缓存，缓存都存在客户端。

不同点：协商缓存需要与服务器交互。

具体看下这两种缓存怎么实现：

什么是客户端缓存？

所谓“客户端缓存”就是指客户端将网络资源保存在用户设备中，可能保存在你的硬盘中，内存中等等等，下次浏览同一个资源时，不再从网络下载，实则是客户端从你的设备中获取的，不同浏览器缓存文件的地址也不尽相同。

以chrome浏览器为例：查看缓存

1.在chrome中输入chrome://version能看到浏览器的大部分信息如图：

chrome详细信息

复制出个人资料路径file:///C:/Users/Administrator/AppData/Local/Google/Chrome/，去掉后面的User，因为带上User可能打不开，因为你的数据在user data下面如图：

点击User Data

点击Default

cache缓存文件所在位置。当前缓存文件的URL列表，点击url可以看到对应的缓存文件内容，包括类型 编码 过期时间等概要信息，以及文件内容等具体信息，以二进制方式显示。

接下来我是使用chromecacheview查看缓存。

工具已经到位，接下验证缓存

验证缓存：

打开百度，ctrl+shift+I或者F12或者鼠标右键-检查，打开开发者模式，不勾选disable-cache选项。

刷新网页可以看到from memory cache（红框内）表示从缓存中获取的文件，打开chromeViewCache工具ctrl+f搜索bd_logo1.png

红色框内的就是本地缓存的bd_logo1.png的信息。也就是服务端返回给我们的response header信息。

前面提到了强制缓存和协商缓存：

图中expires和Cache-Control两个字段控制强制缓存。

介绍一下这个两个字段：

expires缓存原理：Http1.0 中的标准，表明过期时间，注意此处的时间都是指的是服务器的时间。

1. 浏览器第一次请求资源，浏览求返回资源的同时会在response header里面添加Expires。

2. 浏览器请求到资源时，会一同把资源和Expires缓存起来。

3. 浏览器再次请求同一个资源时，会先从浏览器缓存中获取，然后用客户端时间和缓存2步骤里缓存的expires作比较。小于缓存的expires表示使用缓存，否则从服务器获取。

4. 缓存过期也就是客户端时间大于expires，会再次从服务器获取资源，并且更新expires。

5. expires是http1.0的产物，已经过时。由于客户端时间可以随意修改，缓存容易出现问题。所以在http1.1之中使用了相对时间，cache-control: max-age=1000（注意单位是秒）

Cache-Control的缓存原理：

cache-control属性值：

max-age: 设置缓存的最大的有效时间，单位为秒（s）。max-age会覆盖掉Expires

 s-maxage: 只用于共享缓存，比如CDN缓存（s -> share）。与max-age 的区别是：max-age用于普通缓存，而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖max-age 和 Expires.

public：响应会被缓存，并且在多用户间共享。默认是public。

private: 响应只作为私有的缓存，不能在用户间共享。如果要求HTTP认证，响应会自动设置为private。

no-cache: 指定不缓存响应，表明资源不进行缓存。但是设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。

no-store: 绝对禁止缓存。

must-revalidate: 如果页面过期，则去服务器进行获取。

当浏览器命中强制缓存时：出现两种状态200 from disk cache和200 from memory cache.

from memory cache：字面理解是从内存中，其实也是字面的含义，这个资源是直接从内存中拿到的，不会请求服务器一般已经加载过该资源且缓存在了内存当中，当关闭该页面时，此资源就被内存释放掉了，再次重新打开相同页面时不会出现from memory cache的情况.

from disk cache：同上类似，此资源是从磁盘当中取出的，也是在已经在之前的某个时间加载过该资源，不会请求服务器但是此资源不会随着该页面的关闭而释放掉，因为是存在硬盘当中的，下次打开仍会from disk cache.

内存缓存(from memory cache)和硬盘缓存(from disk cache)，如下:

内存缓存(from memory cache)：内存缓存具有两个特点，分别是快速读取和时效性：

快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取。

时效性：一旦该进程关闭，则该进程的内存则会清空。

硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

协商缓存

顾名思义就是跟服务器协商是否使用缓存。

比较Last-modified 和 Etag 字段

Last-modified: 表明请求的资源上次的修改时间，服务器返回的时间，在response header里。

If-Modified-Since：客户端会保留资源上次的修改时间，也就是Last-modified的时间。

Etag：资源的内容标识。（不唯一，通常为文件的md5或者一段hash值，只要保证写入和验证时的方法一致即可）。

If-None-Match： 客户端保留的资源内容标识。

浏览器将在第二次请求的header中加入If-Modified-Since（对应于Last-modified）， 和If-None-Match（对应于Etag）。

通常情况下，如果同时发送 If-None-Match 、If-Modified-Since字段，服务器只要比较etag 的内容即可，当然具体处理方式，看服务器的约定规则。

Last-modified和If-Modified-Since：看下返回结果，设置Last-modified固定时间123456

看下第一请求：只有response有last-modify，请求头里并没有If-Modified-Since。因为是第一请求，浏览器并未缓存。

再次请求，Last-modified和If-Modified-Since一致，返回status: 304，告诉浏览器使用浏览器缓存。

Etag和If-None-Match：同上直接上Etag的代码：

第一次请求：response: Etag-123456。request：header并没If-None-Match，状态：200

第二次请求：