前言
什么是浏览器缓存？通俗的讲，浏览器缓存就是为了加快浏览速度，存储一份被请求的资源。当下次需要使用该资源时，浏览器会根据缓存机制决定是否重新向服务器请求。作为前端提高网页访问速度的必要手段。了解浏览器的缓存命中原理，准确理解缓存的概念，是前端开发者必须了解和学习的。接下来说一下这个浏览器缓存（这里主要介绍HTTP协议定义的缓存机制，至于新的浏览器存储、indexDb等缓存方式下一篇会整理）
缓存库
既然叫资源缓存，那存放资源的仓库在哪里呢？浏览器的资源缓存大致分为两类：内存缓存和磁盘缓存。Memory Cache也是内存中的缓存。Memory Cache的优点是读取速度快，但是缓存会随着进程的释放而释放。当用户关闭页面时，Memory Cache 也会被清空。对应的内存缓存就是Disk Cache，也就是硬盘中的缓存。它将根据 HTTP 头字段进行判断。即使关闭页面，下次打开时，如果确定命中缓存，浏览器仍然可以访问硬盘。中读缓存，解决了内存缓存小且不可持续的缺点，但也比较慢。不同浏览器的磁盘缓存地址也不同。可以通过浏览器自带的清除缓存功能来清除缓存。毕竟，缓存在开发过程中并不是一个受欢迎的朋友。访问顺序如下图所示：
缓存策略
浏览器缓存策略可以分为两类：强制缓存和协商缓存。浏览器在请求资源之前，会先判断是否命中强缓存，再判断是否命中协商缓存。两者的根本区别在于是否需要再次向服务器发送请求。
强大的缓存
我们首先关注强缓存。强缓存不是由服务器来判断，而是通过http头中的Expires和Cache-Control字段来判断本地缓存的资源是否有效。
过期
该字段出现在 HTTP/1.0 时期。该字段表示缓存过期时间。这个时间代表资源的过期时间（需要的缓存时间+服务器时间）。在此时间之前的所有请求都被视为缓存命中。这种方法有个明显的缺点，就是不能保证客户端时间和服务端时间一致。也就是说，由于客户端时间问题，缓存可能会出现问题。
缓存控制
针对Expires引起的问题，在HTTP/1.1中增加了一个新的字段Cache-Control。与Expires的绝对时间相比，Cache-Control中的max-age使用的是相对时间。即使客户端时间发生变化，相对时间也不会随之变化，这样可以保持服务端和客户端的时间一致性。因此，在 HTTP/1.1 的推广之后，Expires 逐渐被取代，并且当 max-age 和 Expires 同时存在时，前者的优先级高于后者。
无缓存
如果头域包含 Pragma:no-cache、Cache-Control:no-cache 或 Cache-Control:no-store。表示强缓存不会被命中
协商缓存
当强缓存未命中时，将进入协商缓存阶段。这时候客户端会向服务器发起请求，服务器会判断本地缓存资源是否可用。那么缓存文件在哪里，服务器用什么来判断请求的资源是否可以被缓存呢？使用权？
Last-Modified 和 If-Modified-Since
Last-Modified 和 If-Modified-Since 两兄弟最先出现。当浏览器第一次请求资源时，服务器返回的头部字段会包含Last-Modify字段，表示当时资源的最后一次修改时间，是一个绝对时间。第二次需要该资源时，再次发送给服务器的请求头中包含If-Modify-Since字段，即缓存前返回的Last-Modify。服务器会将收到的 If-Modify-Since 与当前的 Last-Modified 进行比较。如果它命中缓存，它将返回 304。客户端使用缓存。如果不同，它将下载正确的数据。
ETag 和 If-None-Match
由于某些文件可能会定期更改，但它们的内容不会更改，因此我希望此时能够命中缓存。为了解决这个问题，出现了ETag和If-None-Match。ETag 是一个字符串，可以代表唯一的文件。字符串是文件的一些值经过哈希处理后组合而成的值。当客户端发现与服务器约定的直接读取缓存的时间已经过去（通常是Cache-Control的max-age）时，在请求中发送。if-None-Match 选项，取值为最后一次请求后响应头的 ETag 值，表示服务器和服务器之间文件的唯一字符串比较（如果服务器上的文件发生变化，则该值会发生变化)，如果相同则返回304，客户端使用缓存缓存文件在哪里，如果不同则下载正确的数据。
为了加深印象，我们用一个流程图来表示整个缓存过程：
用户行为对缓存的影响
1）网页强制刷新时，直接从服务器加载，跳过强缓存和协商缓存；
2）刷新网页时，跳过强缓存，但检查协商的缓存；
写在最后
本文主要介绍浏览器的缓存内容。计划中我会写四篇关于缓存的文章，大致是h5带来的新缓存方式，redis缓存策略，缓存的实践。山水相见，我们下期再见。