web缓存原理

web缓存在网站开发有很大的益处，可以提高网站的访问速度，减轻服务器的压力，减少带宽的占用。

浏览器缓存

浏览器都自带http缓存的实现，我们只需要提供正确的请求头，浏览器和服务器会根据请求来做对应的缓存策略。例如，百度对jquery静态文件的一个http请求如下

从上面看出，一个响应头的缓存策略控制包括 cache-control etag expires last-modified

Cache-Control

每一个资源请求都可以通过cache-control来控制缓存，一般设置 max-age 来控制静态文件的缓存时间

max-age=120的意思是，从现在开始120s后缓存失效，在缓存的有效期内，浏览器请求资源时候，不需要向服务器请求，而是从浏览器缓冲中拉取缓存内容

实现的方法：服务器通过设置响应头，浏览器会根据这个策略来实现缓存

Cache-Control 标头是在 HTTP/1.1 规范中定义的，取代了之前用来定义响应缓存策略的标头（例如 Expires）。所有现代浏览器都支持 Cache-Control，因此，使用它就够了。

Expires

expires也是设置过期时间，浏览在超过这个时间失效，但是用cache-control在的话此请求头会被忽略

expires:Sun, 23 Apr 2017 17:59:47 GMT

Etag

客户端请求资源，服务器会根据请求url生成一串随机字符串

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
ETag: W/"0815"

然后发送给客户端，下次请求，配合If-None-Match发送etag字符串

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

如果匹配，服务器返回304，缓存再可以用120s，如果不匹配重新下载资源，返回200

Last-Modified

last-modified服务器会返回文件的最后修改时间，配合请求头字段last-modified-since字段使用

客户端请求资源，服务器返回文件随后修改时间

Cache-Control:public, max-age=31536000
Last-Modified: Mon, 03 Jan 2017 17:45:57 GMT

客户端再次请求，附加请求头

If-Modified-Since: Mon, 03 Jan 2011 17:45:57 GMT

同etag一样，不过这个字段是基于时间的，如果在文件未修改，返回304，已修改，重新传输新的资源200

总结

浏览器请求资源，首先判断cache-control或者expires（当两个一起存在时候，expires忽略），如果未失效，使用缓存，返回 200（from cache）

如果失效，向服务器发送请求，判断etag或者Last-Modified是否改变，如果未改变，返回 304 Not Modified

参考文档：

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers