by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2014/02/%e6%b5%8f%e8%a7%88%e5%99%a8%e7%bc%93%e5%ad%98%e5%ad%a6%e4%b9%a0%e6%9c%ad%e8%ae%b0/

缓存的类型有很多种,服务器缓存,浏览器缓存,代理缓存等。本文主要讲一下浏览器的缓存原理,主要是依赖HTTP协议来控制。

使用缓存有以下优点

  1. 减少冗余的数据传输
  2. 缓解网络瓶颈的问题
  3. 降低了对服务器的要求
  4. 降低了距离时延

缓存原理

我们知道浏览器端发送的一个常规的HTTP请求,得经过三次握手阶段,影响响应速度有服务器、网络、距离等原因。这过程的优化手段非常的多,包括前段和服务端,若是能够命中缓存,直接获取到请求的内容,则大大的提高了用户体验。

缓存分为命中与未命中,命中则直接获取。未命中的话还有再验证过程,也就是新鲜度检查;若再验证命中则返回304,还是未命中就返回200。

常用的缓存头部有:

  1. Cache-Control
  2. Expires
  3. If-Modified-Since
  4. Last-Modified
  5. If-None-Match
  6. ETag

需要说明的是Cache-Control是HTTP/1.1才支持的,优先级比Expires要高。一般通过设置max-age的值控制缓存的时间,以秒为单位。文档在缓存过期之前,无需与服务器打交道。一旦过期,就必须与服务器进行核对,询问文档是否被修改过。

Last-Modified和ETag是条件请求(Conditional Request)相关的两个字段。如果一个缓存收到了针对一个页面的请求,它发送一个验证请求询问服务器页面是否已经更改,在HTTP头里面带上ETag和If Modify Since头。

If-Modified-Since配合Last-Modified工作。服务器修改过会将Last-Modified附加上去,If-Modified-Since是缓存副本的最后修改时间。同理If-None-Match是配合Etag工作的。但Etag的优先级高于Last-Modified,也就是说条件请求的时候先去判断ETag。

既然有Last-Modified,为什么还要用ETag字段呢?因为如果在一秒钟之内对一个文件进行两次更改,Last-Modified就会不正确。因此,HTTP/1.1利用Entity Tag头提供了更加严格的验证。

缓存机制示意图第一次请求示意图:

浏览器缓存学习札记

第二次请求示意图:

浏览器缓存学习札记

缓存还跟用户的行为有关

用户操作         Expires/Cache-Control          Last-Modified/Etag   
地址栏回车                 有效                          有效   
页面链接跳转               有效                          有效   
新开窗口                   有效                          有效   
前进、后退                 有效                          有效   
F5刷新                     无效                          有效   
Ctrl+F5刷新                无效                          无效

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2014/02/%e6%b5%8f%e8%a7%88%e5%99%a8%e7%bc%93%e5%ad%98%e5%ad%a6%e4%b9%a0%e6%9c%ad%e8%ae%b0/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号