浏览器缓存初识

作者: 细密画红 | 来源:发表于2017-01-19 10:55 被阅读109次

浏览器缓存初识
浏览器缓存（http缓存）
缓存、cookie、token、session、localSto
协商缓存和强缓存
DSBD
HTTP缓存机制
HTTP 缓存控制
Web浏览器的缓存机制
浏览器缓存？优点？清除方法？
浏览器缓存

对于客户端缓存（即浏览器缓存），因为浏览器会自动管理缓存，所以平时编程时基本没怎么考虑，但还是要了解一下。

浏览器是否使用缓存、缓存多久，是由服务器来控制的。当浏览器请求一个网页时，服务器发回的响应头部分的某些字段指明了有关缓存的关键信息。

服务器在返回响应式，还会发出一组HTTP头，用来描述内容类型、长度、缓存指令、验证令牌等。

cache1.png

例如，上图中服务器返回了一个1024字节的响应，指导客户端缓存响应长120秒，并提供验证令牌(x234dff),在响应期过后，可以用来验证资源是否被修改。

使用缓存的两点好处：

减少页面加载时间

减少服务器负载

HTTP协议中关于缓存信息头的关键字

Cache-Control 缓存头控制
在HTTP/1.1 规范中定义，该指令控制谁在什么条件下可以缓存响应，以及可以缓存多久。

Cache-directive	说明
public
private	只为单个用户缓存，不允许任何中继缓存对其进行缓存。例如用户浏览器可以缓存包含私人信息的HTML，但是CDN不能缓存。
no-cache	必须先与服务器确认返回的响应是否被更改。如果存在合适的验证令牌(ETag)，no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。
no-store	直接禁止浏览器和所有中继缓存存储返回的任何版本的响应（例如银行数据，每次用户请求时，都会向服务器发送请求，并下载完整响应）
max-age=xxx	从当前请求开始，允许获取的响应被重用的最长时间（单位：秒）eg.max-age=60 表示响应可以再缓存和重用60秒。

how to make a desicion? here comes 最优缓存策略

最优缓存策略.png

理想情况下，目标应该是在客户端上缓存尽可能多的响应，缓存尽可能长的时间，并且为每个响应提供验证令牌，以便进行高效的重新验证。
有的网站可以缓存90%以上的资源，有些网站有许多私密的或者时间要求苛刻的数据，根据无法缓存。
我们要做的是审查我们的网页，确定哪些资源可以被缓存，并确保可以返回正确 Cache-Control和ETag头

Expires

通过指明缓存的具体过期时间来控制缓存。在过期时间以内再次发起请求，浏览器会直接使用本能副本。和Cache-Control同时出现时，Cache-Control会覆盖前者的设定能。

Last-Motified 和ETag

服务器可在HTTP返回头中包含这两个字段。Last-Modify指被请求资源在服务器端的上次修改时间。ETag是一个唯一文件表示符，每次文件修改后都会生成一个新的ETag.
即使是在过期时间以内，为了保证所加载的资源是最新的，大部分浏览器不会再直接使用缓存中的数据，而是发出一个条件请求(Conditional GET Request),对于这类请求，浏览器会在请求头中包含<font color=gray>If-Modify-since</font>或If -None-Match字段，前者即浏览器当初得到的Last-Modified，后者即浏览器当初得到的ETag.当服务器发现资源的更新时间晚于 If-Modified-Since 所提供的时间，或者资源在服务器端当前的 ETag 和 If-None-Match 提供的不符时，会响应整个资源，否则只会响应一个 304 Not Modified 状态码（因此浏览器将不需要重新下载整个资源）。这种机制可以最大程度上减少数据下载量。

废弃和更新已缓存的响应

Q: 文件仍在缓存期内，而设计人员提交更新，用户如何使用到新文件？
A:在不更改资源网址的情况下，我们做不到。一旦浏览器缓存响应，在过期以前，将一直使用缓存版本，除非因为某种原因从缓存中删除，例如用户清除了浏览器缓存。
解决：在资源内容更改时，我们可以更改资源的网址，强制用户下载新响应。一般，可以在文件名中嵌入文件的指纹码（或版本号）来实现。例如：style.x234dff.css.

缓存层级更新策略.png
HTML为no-cache,意味着浏览器每次请求都会重新验证文档。
组合使用ETag、Cache-Control 和唯一网址，我们能提供的最佳方案是：较长的过期时间，控制可以缓存响应的位置，以及按需更新。