浏览器第一次发起http请求后，会根据响应报文中的缓存标识，决定是否需要缓存结果。如果需要则将请求结果存入浏览器缓存中。
HTTP缓存分为强缓存和协商缓存。
强缓存
强缓存就是浏览器发起http请求，先查找是否有缓存，如果有且生效，则直接读取缓存。
缓存规则：
当浏览器向服务器发送请求的时候，服务器会将缓存规则放入响应头中返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，Cache-Conctrol的优先级比Expires高。
Expires
Expires是HTTP/1.0控制缓存的字段，值为服务器响应结果缓存的到期时间，即再次发送请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。
现在浏览器的默认使用的是HTTP/1.1，由Cache-Control替代Expires，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，而Expires的值是UTC（绝对）时间，如果客户端与服务端的时间由于某些原因（时区不同；客户端和服务端有一方的时间不准确）发生误差，或者客户端修改了本地时间，那么强制缓存直接失效。
Cache-Control
Cache-Control 取值为：
-
public：所有内容都将被缓存（客户端和代理服务器都可缓存） -
private：所有内容只有客户端可以缓存，Cache-Control的默认取值 -
no-cache：客户端缓存内容，但是否使用缓存则需要经过协商缓存来验证决定 -
no-store：所有内容都不会被缓存.。即每次请求都向服务器拿资源，服务器不会校验资源是否过期或有变化，而是直接返回资源 -
max-age=xxx：缓存内容将在xxx秒后失效 -
must-revalidate：本地资源过期前可以使用本地资源，本地资源一旦过期必须去源服务器进行有效性校验
当从缓存中读取资源时，根据缓存规则会有以下三种情况：
- 存在缓存结果和缓存标识，且缓存有效，则直接读取缓存资源，状态码为200（强缓存）
- 不存在缓存资源和缓存标识，强缓存失败，发起http请求
- 存在缓存结果和缓存标识，但缓存失效，则使用协商缓存。然后发起http请求，请求头中携带资源的缓存标识（
Etag）对应字段：If-None-Match和最后更新时间（Last-Modified）对应字段：If-Modified-Since，服务器根据这两个字段去判断：- 如果资源更新，则返回最新资源，状态码为200
- 如果资源无更新，可继续使用缓存文件，状态码为304，浏览器收到响应后再去缓存中读取资源
浏览器的缓存存放在位置
内存（memory）和硬盘（disk）。浏览器读取缓存的顺序是memory cache 、disk cache。
内存缓存（memory cache）
内存缓存是将资源缓存在当前进程的内存中。
特点：
- 读取快：内存缓存会将编译解析后的文件（js、css、图片等）直接存入该进程的内存中，占据该进程的内存资源，在下次使用时快速读取
- 时效性：一旦该进程关闭，则该进程的内存则会清空
硬盘缓存（disk cache）
硬盘缓存是直接将资源写入硬盘中，读取资源需要对该资源存放的硬盘文件进行I/O操作，然后重新解析缓存的资源。比如关闭tab，再次打开，缓存在有效期内，从disk读取，重新解析。
特点：
读取复杂，速度比内存缓存慢。比如css文件。
协商缓存
协商缓存的max-age为0或过期，或Cache-Control的值为no-cache，浏览器请求头携带该缓存的标识和最后更新时间向服务器发起请求，由服务器决定是否继续使用该缓存。
两种情况：
- 协商缓存生效，继续使用缓存，状态码304
- 协商缓存失败，返回最新资源，状态码200
协商缓存的标识也是在响应头中返回的，控制协商缓存的字段分别是：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：客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器会根据该字段的值与该资源在服务器最后被修改时间做对比，若资源过期，则重新返回资源，状态码为200；否则则返回304，可继续使用缓存文件。
Etag（响应头） / If-None-Match（请求头）
-
Etag：服务器响应请求时，返回当前资源文件的唯一标识(由服务器生成) -
If-None-Match：客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，服务器收到该请求后，会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；否则返回新的资源文件，状态码为200。
注意：Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在则只有Etag / If-None-Match生效。
浏览器获取缓存资源的流程：
1. 首次访问：状态码200，黑色字体
首次访问
响应头字段
2. 600s内刷新，状态码200，灰色字体，从memory cache中读取资源
600s内刷新
3. 关闭tab，在缓存有效期内再次打开，状态码200，字体灰色，从disk cache读取资源
关闭tab，缓存有效期内再次访问
4. 缓存过期后刷新页面
缓存过期后刷新页面
http头
总结：
HTTP缓存分为强缓存和协商缓存。强缓存是直接从缓存中读取资源，状态码为200。协商缓存是强缓存失效（max-age过期）或Cache-Control值为no-cache，会发起http请求，请求头携带缓存资源的缓存标识Etag 和（或）最后更新时间Last-Modified，服务器接收到请求后做出判断，如果资源有更新，则状态码为304，表示继续使用缓存资源；反之，返回最新资源，状态码为200。
网友评论