关于浏览器的那些事儿——浏览器的缓存机制

缓存放在哪里？

浏览器一般会在用户的文件系统中创建一个目录，用于存放缓存文件，并给每个缓存文件打上一些必要的标记，比如过期时间等。不同的浏览器采用不同的方式来存储缓存。

浏览器缓存的优点？

1. 减少了冗余的数据传输
2. 减少了服务器的负担，大大提升了网站的性能
3. 加快了客户端加载网页的速度

浏览器的缓存类型？

HTTP缓存可以分为强缓存和协商缓存:

• 强缓存：强缓存命中不会发送请求到服务器端，直接从本地缓存中获取资源，状态码 200 ( from cache )
• 协商缓存：协商缓存会发送请求到服务器，服务器通过请求头部字段来验证资源是否命中协商缓存，如果命中，则返回状态码 304 ( not modified )，通知浏览器从缓存中获取资源。

注意： 浏览器缓存一般是基于GET类型的请求，POST的请求一般不启用本地缓存

什么是缓存协商？

对于浏览器缓存，缓存内容存储在浏览器本地，而内容由Web服务器生成，任何一方都不可能独立完成这一系列过程，所以它们之间需要有一种沟通机制，这就是HTTP中的缓存协商。

当浏览器向Web服务器请求一些内容时，Web服务器需要告诉浏览器哪些内容可以被缓存，浏览器知道后就可以在下一次需要请求该内容时询问服务器是否可以使用本地缓存，服务器收到浏览器的询问后会回应浏览器是否允许浏览器使用本地缓存，不允许则将最新内容传回给浏览器。

总结来说，协商缓存主要有两种情况：

1. 协商缓存生效，返回304
2. 协商缓存失效，返回200和请求结果结果

什么是强制缓存？

强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程，强制缓存的情况主要有三种，如下：

1. 不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致）
2. 存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存
3. 存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果

浏览器缓存相关标识符

与浏览器缓存的字段有如下几种：

1. Cache-Control （指定缓存机制,覆盖其它设置）
2. Pragma （http1.0字段,指定缓存机制， 功能和 Cache-Control:no-cache 一样）
3. Expires （http1.0字段,指定缓存的过期时间， 到了HTTP/1.1，Expire已经被Cache-Control替代）
4. Last-Modified （资源最后一次的修改时间）
5. ETag （唯一标识请求资源的字符串）
6. If-Modified-Since （缓存校验字段, 值为资源最后一次的修改时间, 即上次收到的Last-Modified值）
7. If-Unmodified-Since （同上, 处理方式与之相反）
8. If-Match （缓存校验字段, 值为唯一标识请求资源的字符串, 即上次收到的ETag值）
9. If-None-Match （同上, 处理方式与之相反）

下面来看一下这些字段：

Expires与Cache-Control

Expires和Cache-Control就是服务端用来约定和客户端的有效时间的。

控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。同时存在时，只有Cache-Control生效。

在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：

• public：所有内容都将被缓存（客户端和代理服务器都可缓存）

• private：所有内容只有客户端可以缓存，Cache-Control的默认取值

• no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定

• no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存

• max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

如何在浏览器中判断强制缓存是否生效？

打开控制台的network，其中状态码为灰色的请求则代表使用了强制缓存，请求对应的Size值则代表该缓存存放的位置，分别为from memory cache 和 from disk cache。

from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory –> disk。

Last-Modified / If-Modified-Since和Etag / If-None-Match

控制协商缓存的字段分别有：Last-Modified / If-Modified-Since和Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。

Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间,

If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件。

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200，

应用场景

1. 频繁变动的资源

对于频繁变动的资源，首先需要使用Cache-Control: no-cache 使浏览器每次都请求服务器，然后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的做法虽然不能节省请求数量，但是能显著减少响应数据大小。

2. 不常变化的资源

通常在处理这类资源时，给它们的 Cache-Control 配置一个很大的 max-age=31536000 (一年)，这样浏览器之后请求相同的 URL 会命中强制缓存。