缓存的类型有很多种，服务器缓存，浏览器缓存，代理缓存等。本文主要讲一下浏览器的缓存原理，主要是依赖HTTP协议来控制。

使用缓存有以下优点

1. 减少冗余的数据传输
2. 缓解网络瓶颈的问题
3. 降低了对服务器的要求
4. 降低了距离时延

缓存原理

我们知道浏览器端发送的一个常规的HTTP请求，得经过三次握手阶段，影响响应速度有服务器、网络、距离等原因。这过程的优化手段非常的多，包括前段和服务端，若是能够命中缓存，直接获取到请求的内容，则大大的提高了用户体验。

缓存分为命中与未命中，命中则直接获取。未命中的话还有再验证过程，也就是新鲜度检查；若再验证命中则返回304，还是未命中就返回200。

常用的缓存头部有：

1. Cache-Control
2. Expires
3. If-Modified-Since
4. Last-Modified
5. If-None-Match
6. ETag

需要说明的是Cache-Control是HTTP/1.1才支持的，优先级比Expires要高。一般通过设置max-age的值控制缓存的时间，以秒为单位。文档在缓存过期之前，无需与服务器打交道。一旦过期，就必须与服务器进行核对，询问文档是否被修改过。

Last-Modified和ETag是条件请求(Conditional Request)相关的两个字段。如果一个缓存收到了针对一个页面的请求，它发送一个验证请求询问服务器页面是否已经更改，在HTTP头里面带上ETag和If Modify Since头。

If-Modified-Since配合Last-Modified工作。服务器修改过会将Last-Modified附加上去，If-Modified-Since是缓存副本的最后修改时间。同理If-None-Match是配合Etag工作的。但Etag的优先级高于Last-Modified，也就是说条件请求的时候先去判断ETag。

既然有Last-Modified，为什么还要用ETag字段呢？因为如果在一秒钟之内对一个文件进行两次更改，Last-Modified就会不正确。因此，HTTP/1.1利用Entity Tag头提供了更加严格的验证。

缓存机制示意图第一次请求示意图：

第二次请求示意图：

缓存还跟用户的行为有关

用户操作         Expires/Cache-Control          Last-Modified/Etag   
地址栏回车                 有效                          有效   
页面链接跳转               有效                          有效   
新开窗口                   有效                          有效   
前进、后退                 有效                          有效   
F5刷新                     无效                          有效   
Ctrl+F5刷新                无效                          无效

个人知乎，欢迎关注：https://www.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】