1.4 客户端缓存

1.4.1  页面缓存

页面缓存有两层含义：

• 页面自身对某些元素或者全部元素进行缓存。（这里是这层意思）
• 服务器端将静态页面或动态页面进行缓存。

页面缓存，将之前渲染的页面保存为文件，当用户再次访问是可以避开网络连接，从而减少负载，提升性能和用户体验。（HTML5支持离线缓存和本地存储）

1.4.2  浏览器缓存

HTTP1.0  提供了一些基本的缓存特性。如在服务器端设置Expires的HTTP头来告诉客户端缓存多久是安全的，可以通过if-modified-since的条件请求来使用缓存。其中，发送的时间是文件最初被下载的时间，如果这个文件没有在下载后改变过，服务器可以返回304-Not modified。客户端收到304应答使用缓存文件。

HTTP1.1  有了较大的增强，缓存系统形式化，引入了实体标签e-tag。e-tag是文件或对象的唯一标识，这就意味着在请求一个资源时，可以提供持有的这个资源（通过e-tag提供），然后询问服务器持有的这个资源有没有改变过。如果没有改变过，则e-tag有效，则服务器返回304。

在配置了Last-Modified/ETag的情况下，浏览器再次访问资源时，服务器会检查资源是否修改过，没有修改过就返回304，修改过返回200和完整数据。

Last-Modeified/ETag和Cache-Control/Expires作用不同，Cache-Control/Expires在浏览器本地判断是否在有效期内，如果在直接使用浏览器缓存，否则在请求服务器。

Cache-Control和Expires功能一致，都是指明资源有效期限，有效期内直接使用缓存，否则请求服务器数据（服务器根据资源判断返回304或200）。Cache-Control设置更细致，同时设置的优先级大于Expires。

一般Cache-Control/expires和Last-Modified/ETag配合使用。当用户F5刷新时，即使配置了Cache-Control/expires浏览器也会发送请求，这时就需要服务端根据Last-Modified/ETag返回304来减少响应开销了。

可以通过<meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> 高速浏览器当前页面不被缓存，每次去服务器获取。但是这种做法只有部分浏览器支持，而且一般缓存代理不支持，因为代理不解析HTML。

浏览器缓存能极大提升终端用户的体验，如下图用户操作浏览器的行为对缓存的影响：

链接

 1.4.3  APP上的缓存

...