浏览器缓存、Cache-Control

为什么需要浏览器缓存？

客户端和浏览器建立连接时需要消耗时间，客户端和服务器之间进行多次往返通信才能获得完整的响应，这拖延了浏览器可以使用和处理内容的时间。这就增加了访问服务器的数据和资源的成本，因此利用浏览器的缓存机制重用以前获取的数据就变成了性能优化时需要考虑的事情。

说到浏览器中的缓存机制，其实就相当于HTTP协议定义的缓存机制。为每个资源指定一个明确的缓存策略，用以定义资源是否可以缓存，由谁来缓存，可以缓存多久，并且在缓存时间到期时如何有效地重新验证。

浏览器缓存

一、Cache-Control

Cache-Control头参数的含义(响应头中的Cache-Control)

1 no-cache : 表示必须先与服务器确认返回的响应是否被更改，如果资源未被更改，可以避免下载。
.
2 no-store : 禁止缓存任何响应，也就是说每次请求资源时都下载完整的响应。
.
3 public ： 如果响应被标记为public，即使有关联的 HTTP 认证，甚至响应状态码无法正常缓存，响应也可以被缓存。
.
4 private :浏览器可以缓存private响应，但是通常只为单个用户缓存，不能在用户间共享。因此，不允许任何代理服务器对其进行缓存。比如，用户浏览器可以缓存包含用户私人信息的 HTML 网页，但是 CDN 不能缓存。

.
5 max-age : 用来设置资源被缓存的最长时间(单位是秒)。
如何选择使用什么指令：

二、Expires

缓存过期时间，用来指定资源到期的时间。
是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。

三、Last-modified
服务器端文件的最后修改时间，需要和cache-control共同使用。检查是否更新·
如果没有修改，则返回码为304，使用缓存。
如果修改过，则再次去服务器请求资源，返回码和首次请求相同为200，资源为服务器最新资源。

四、Etag（暂未了解，自行百度）

对于已缓存的的响应，如何更新？

当用户已经缓存了响应（过期时间还早），但是服务器上对应的资源被修改了。那么此时我们需要缓存过的用户更新缓存。
做法：我们可以在资源的内容更改后，更改资源的网址，强制用户下载新响应。
比如在修改了css样式表，再在资源链接后添加参数：

注：该图片来源于网络