看图说话 第一次请求时
当浏览器再次请求时
一、什么是缓存？
缓存能够减少浏览器请求资源的次数，当第一个请求资源完成后，根据相应的缓存机制，将一些静态资源存储在本地磁盘当中，这样下次请求资源的时候，浏览器直接从本地缓存中读取文件，不需要再次发送请求。这样可以减少了网络延迟，加快了页面响应速度，增强了用户体验；减少了网络带宽消耗；减轻了服务器的压力。
本文内容围绕此思维导图展开
二、浏览器缓存有哪些标识?
以 Chrome 为例，打开开发者工具，点击 network tab，选择 all，这里会显示我们请求的所有静态资源的加载情况。
这种size大小不为0的请求，就是没有使用缓存。size是memory cache 和 disk cache就表示，浏览器并没有向服务器发送请求，而是直接读取了本地的缓存资源文件。
三、什么是 memory cache？什么是 disk cache？两者有什么区别？
1、Memory Cache
内存缓存是一种比较特殊的缓存，他不受 max-age、no-cache 等配置的影响，即使我们不设置缓存，如果当前的内存空间比较充裕的话，一些资源还是会被缓存下来。但这种缓存是暂时的，一旦关闭了浏览器，这一部分用于缓存的内存空间就会被释放掉。如果真的不想使用缓存，可以设置 no-store，这样，即便是内存缓存，也不会生效。
内存缓存虽然比较高效，但还是受限于计算机内存的大小，所以能让我们使用的内存并不多，这个时候就需要硬盘来存储大量的缓存。
2、Disk Cache
Disk Cache 也就是存储在硬盘中的缓存。相比较内存缓存的优势就是长时效。
它会根据HTTP Header中设置的字段类型，来判断资源是否需要重新请求。
如果当前内存使用率高的话，请求资源大概率会被缓存到disk cache。
强缓存
不会向服务器发送请求，直接从缓存中读取资源，强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。
这里我们只强调 Cache-Control。Expires已经是比较古老的处理方式，有一定的局限性。大家在业务中设置缓存策略的时候，直接使用Cache-Control就好。
Cache-Control
当Cache-Control:max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。
Cache-Control 可以在请求头或者响应头中设置，并且可以组合使用。
no-cache：
客户端缓存内容，是否使用缓存则需要经过协商缓存来验证决定。表示不使用 Cache-Control的缓存控制方式做前置验证，而是使用 Etag 或者Last-Modified字段来控制缓存。这个名字有一点歧义，并不是说浏览器不能缓存，只是浏览器在使用缓存数据时，需要先确认一下资源文件是否还跟服务器保持一致。
no-store：
所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存(memory cache也会失效)
max-age：
max-age=xxx 表示缓存内容将在xxx秒后失效
一般，我们会设置Cache-Control的值为“public, max-age=xxx”，表示在xxx秒内再次访问该资源，均使用本地的缓存，不再向服务器发起请求。
强缓存依据某个时间或者某个时间段，所以并不会响应服务端资源文件的变化，一旦资源文件发生了变化，那么强缓存的文件并不会在时间范围之内更改，这样就造成了服务器和浏览器文件不一致的问题，那么怎么解决这个问题呢？此时我们就需要使用协商缓存。
协商缓存
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。
协商缓存可以通过设置两种 HTTP Header，Last-Modified 或者 ETag 实现。
Last-Modified 是该资源文件最后一次更改时间，服务器会在 Response Headers 中返回，浏览器在下一次发送请求时，放到Request Header里的If-Modified-Since里，服务器在接收到后也会做比对，如果相同则命中协商缓存。
Etag 是服务器响应请求时，返回当前资源文件的一个唯一标识，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到 Request Header 里的 If-None-Match 里，服务器只需要比较客户端传来的 If-None-Match 跟自己服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了。
从上面的图片可以看到，Last-Modified 返回的最小时间单位是秒，所以，服务器的资源和本地的资源有可能存在不一致，如果请求的时机正好在资源变动的1s之内，ETag使用的是唯一标识，所以能够很好的解决这个问题。
五、浏览器缓存最佳实践
频繁变动的资源
Cache-Control: no-cache
对于频繁变动的资源，首先需要使用Cache-Control: no-cache 使浏览器每次都请求服务器，然后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的做法虽然不能节省请求数量，但是能显著减少响应数据大小。
不常变化的资源
Cache-Control: max-age=31536000
通常在处理这类资源时，给它们的 Cache-Control 配置一个很大的 max-age=31536000 (一年)，这样浏览器之后请求相同的 URL 会命中强缓存。而为了解决更新的问题，就需要在文件名中添加 hash，之后更改hash，从而达到更改请求路径的目的。
HTML 文件千万别设置强缓存，目前开发页面，大多数情况下都是单页面应用，一旦html不能成功更新，那将是灾难级的技术故障，所以html应该设置Cache-Control为no-cache，每次请求都去和服务器的文件比对。
CSS、JS、图片等资源，可以设置一个长时间的强缓存。更改文件的时候，配合hash值，这样一旦文件发生了改变，那么浏览器直接去请求新的资源，在文件不变动的情况下，直接使用本地缓存，不去向浏览器请求。
参考：https://baijiahao.baidu.com/s?id=1757771619162707078&wfr=spider&for=pc
