1. 什么是缓存

缓存（cache）是数据交换的缓冲区，是临时存储数据的仓库，在有大量数据交换的应用程序中，我们会采取一些方式将那些实时性要求不高的数据生成副本并存储在某个相对来说可快速到达、访问、获取的仓库，这样在需要这些数据的时候我们直接从这个仓库中获取数据。

2. 缓存主要目的

（1）提升数据交互的性能（速度）；
（2）缓解服务器压力；
（3）减少冗余的数据传输。

3. http缓存概述

当浏览器需要从目标服务器上获取一些资源时，需向目标服务器发送一系列http请求，若应用程序的pv达到百万甚至千万级时，目标服务器压力会很大，此时，http协议给出了一个优化方案：http缓存机制，http缓存可以分为两大类：强缓存和协商缓存。
在浏览器第一次发起请求时，本地无缓存，浏览器向目标服务器发起请求，服务器端响应请求，浏览器端缓存。过程如下：

浏览器再次请求时，过程如下：

3.1 强缓存

强缓存只要分为两种情况,Expires和Cache-Control:
Expires的值是服务器告诉浏览器的缓存过期时间（GMT时间，即格林尼治时间），下一次请求时，如果浏览器端的当前时间还没有到达过期时间，则直接使用缓存数据。下面通过Express服务器来设置一下Expires响应头信息:

在demo.js中添加了一个Expires响应头，第一次请求的时候还是会向服务器发起请求，此时服务器会把过期时间和文件一起返回给我们：

当刷新页面时可以看到文件是直接从缓存（memory cache）中读取的，并没有发起请求：

虽然这种方式添加了缓存控制，节省流量，但还是有以下几个问题：
（1）由于浏览器时间和服务器时间不同步，如果浏览器设置一个靠后的时间，过期时间一直没有用；
（2）缓存过期后，不管文件有没有发生变化，服务器都会再次读取文件返回给浏览器。
针对浏览器和服务器时间不同步，加入了新的缓存方案Cache-Control；Cache-Control不是直接告诉浏览器过期时间，而是告诉一个相对时间如Cache-Control=10秒，意思是10秒内，直接使用浏览器缓存：

3.2 协商缓存

强制缓存也存在某些弊端，如每次都是根据时间来判断缓存是否过期，当到达过期时间后，如果文件没有改动，再次获取文件会浪费服务器资源。为节省服务器资源，再次改进方案，浏览器和服务器协商，服务器每次返回文件的同时，告诉浏览器文件在服务器上最近的修改时间。请求过程如下：
（1）浏览器请求静态资源demo.js；
（2）服务器读取磁盘文件demo.js，返给浏览器，同时带上文件上次修改时间 Last-Modified（GMT标准格式）；
（3）当浏览器上的缓存文件过期时，浏览器携带请求头If-Modified-Since（上一次请求的Last-Modified）请求服务器；
（4）服务器比较请求头里的If-Modified-Since和文件的上次修改时间。如果果一致就继续使用本地缓存（304），如果不一致就再次返回文件内容和Last-Modified；
（5）循环请求。
具体实现如下：

多次刷新后可以看到请求结果：

尽管Last-Modified和If-Modified-Since可以节省服务器资源，但是还是有以下缺点：
（1）由于Last-Modified修改时间是GMT时间，只能精确到秒，如果文件在1秒内有多次改动，服务器并不知道文件有改动，浏览器拿不到最新的文件；
（2）如果服务器上文件被多次修改了但是内容却没有发生改变，服务器需要再次重新返回文件；
为了解决文件修改时间不精确带来的问题，服务器和浏览器再次协商，不返回时间，直接返回文件的唯一标识ETag，只有当文件内容改变时，ETag才改变。请求过程如下：
（1）浏览器请求静态资源demo.js；
（2）服务器读取磁盘文件demo.js，返回给浏览器，同时带上文件的唯一标识ETag；
（3）当浏览器上的缓存文件过期时，浏览器携带请求头If-None-Match（上一次请求的ETag）请求服务器；
（4）服务器比较请求头里的If-None-Match和文件的ETag，如果一致就继续使用本地缓存（304），如果不一致就再次返回文件内容和ETag。
（5）循环请求。
具体实现如下：

请求结果如下：

多次刷新页面时：