前端缓存

深藏阁楼爱情的钟 2022-04-18 02:16 180阅读 0赞

###### *最新更新时间：2018年11月7日09:33:37* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：  
> 本文记录http cache，所有缓存资源的问题，都仅仅针对GET请求，而对于POST、DELETE、 PUT这类行为性操作通常不做任何缓存。  
> 缓存分为两类：200 from cache 强缓存 和 304 not modified 协商缓存  
> HTTP协议中Cache-Control 和 Expires可以用来设置新鲜度的限值，前者是HTTP1.1中新增的响应头，后者是HTTP1.0中的响应头。

#### 1、禁止缓存某个文件 ####

###### 1.1、客户端的操作方案 ######

*  1.1.1、给静态资源文件名加上`版本号`或`随机数`

*  1.1.2、使用meta语法

*  1.1.3、发起http请求的时候设置请求头

//jquery 方式
    $.ajax({ 
        type: "GET",
        url: "app.php",
        success: function(data) { 
            console.log(data);
        },
        beforeSend: function(xhr) { //设置请求头
            xhr.setRequestHeader("Cache-Control", "no-cache");//表示不使用本地缓存的资源
        }
    });
    //原生方式
    var xhr；
    xhr.onreadystatechange=function(){ }
    xhr.open('method','url',true);
    xhr.setRequestHeader("Cache-Control", "no-cache") //设置http请求头，且必须在xhr.open()函数之后设置
    xhr.send(null);

> W3C标准文档规定以下请求头信息是浏览器控制的，开发者不允许设置这些请求头：  
> Accept-Charset Accept-Encoding Access-Control-Request-Headers Access-Control-Request-Method Connection Content-Length Cookie Cookie2 Date DNT Expect Host Keep-Alive Origin Referer TE Trailer Transfer Encoding Upgrade User-Agent Via

###### 1.2、服务端的操作方案 ######

*  1.2.1、返回http请求的时候设置响应头

//百度的一个页面
    var ResponseHeaders = { 
    	//允许客户端缓存该文件时长10年
    	Cache-Control: max-age=315360000
    	//客户端首次请求该文件的时间
    	Date: Tue, 06 Nov 2018 14:42:37 GMT 第一次下载时间，之后200from cache
    	//服务端对不同的文件通过固定的算法生成的一个唯一的hash，当文件被修改时，这个唯一的hash就会发生变化
    	Etag: "1ec5-502264e2ae4c0"
    	//期望该文件在客户端过期的具体日期
    	Expires: Fri, 03 Nov 2028 14:42:37 GMT
    	//该文件在服务端上次修改的时间
    	Last-Modified: Wed, 03 Sep 2014 10:00:27 GMT
    }
    //Etag和Last-Modified这两个都能用来判断当前的文件是否发生了变化
    //Cache-Control优先级高于Expires

#### 2、http请求资源的流程图 ####

*  第一次请求资源：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]
 *  第一次之后请求资源：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 1]

#### 3、相关知识点 ####

###### 3.1、Cache-Control字段的含义 ######

> Cache-Control，告诉浏览器该资源是否已过期，默认的是private

<table> 
 <thead> 
  <tr> 
   <th>value</th> 
   <th>meaning</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>no-cache</td> 
   <td>必须先与服务器确认资源是否被更改过（依靠If-None-Match和Etag），然后再决定是否使用本地缓存</td> 
  </tr> 
  <tr> 
   <td>public</td> 
   <td>响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存</td> 
  </tr> 
  <tr> 
   <td>private</td> 
   <td>表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）</td> 
  </tr> 
  <tr> 
   <td>no-store</td> 
   <td>禁止浏览器缓存该资源，每次用户请求资源时都会向服务器发送一个请求。通常用于机密性资源。</td> 
  </tr> 
  <tr> 
   <td>no-transform</td> 
   <td>不得对资源进行转换或转变</td> 
  </tr> 
  <tr> 
   <td>must-revalidate</td> 
   <td>缓存必须在使用之前验证旧资源的状态，并且不可使用过期资源</td> 
  </tr> 
  <tr> 
   <td>max-age=seconds</td> 
   <td>设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)</td> 
  </tr> 
  <tr> 
   <td>s-maxage=seconds</td> 
   <td>覆盖max-age 或者 Expires 头，但是仅适用于共享缓存(比如各个代理)，并且私有缓存中它被忽略</td> 
  </tr> 
 </tbody> 
</table>

###### 3.2、服务器再验证 ######

> 浏览器或代理缓存中缓存的资源过期了，并不意味着它和原始服务器上的资源有实际的差异，仅仅意味着到了要进行核对的时间了。这种情况被称为服务器再验证。  
> 如果资源发生变化，则需要取得新的资源，并在缓存中替换旧资源。  
> 如果资源没有发生变化，缓存只需要获取新的响应头，和一个新的过期时间，对缓存中的资源过期时间进行更新即可。  
> HTTP1.1 推荐使用的验证方式是`请求头If-None-Match/响应头Etag`，如果这两个字段的hash值相等，表示缓存有效  
> HTTP1.0 中则使用`请求头If-Modified-Since/响应头Last-Modified`

###### 3.3、强缓存和协商缓存 ######

*  强缓存，即本地缓存

> 浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息；本次请求根本就不会与服务器进行通信；

*  协商缓存

> 如果没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服务器根据请求中的相关header信息来比对结果是否协商缓存命中；若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>强缓存</th> 
   <th>协商缓存</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>获取资源形式</td> 
   <td>从缓存取</td> 
   <td>从缓存取</td> 
  </tr> 
  <tr> 
   <td>状态码</td> 
   <td>200（from cache）</td> 
   <td>304（not modified）</td> 
  </tr> 
  <tr> 
   <td>是否向服务器发送请求</td> 
   <td>否，直接从缓存取</td> 
   <td>是，通过服务器来告知缓存是否可用</td> 
  </tr> 
  <tr> 
   <td>相关的header字段</td> 
   <td>Cache-Control / Expires</td> 
   <td>http1.0<code>请求头If-Modified-Since/响应头Last-Modified</code> / http1.1<code>请求头If-None-Match/响应头Etag</code></td> 
  </tr> 
 </tbody> 
</table>

#### 4、扩展：xhr ####

*  发送ajax

//创建XHR对象
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")；
    //指定readystatechange事件
    xhr.onreadystatechange=function(){ 
        if(xhr.readyState == 4){ 
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { 
                //服务器传来的数据为JSON
                var data=JSON.parse(xhr.responseText);
                console.log(data);
            }else{ 
                console.log('Request was unsuccessful:',xhr.status);
            }
        }
    }
    //为发送请求做准备
    xhr.open('method','url',true);
    xhr.setRequestHeader("Cache-Control", "no-cache") // 设置http请求头，且必须在xhr.open()函数之后设置
    //正式发送请求。
    xhr.send(null);

*  xhr对象详解

var xhr;
    //属性
    xhr.responseText
    xhr.responseXML
    xhr.status
    xhr.statusText
    xhr.readyState
    //关于执行顺序：下面的事件和方法必须按照从上到下的先后顺序添加或执行
    //监听事件
    readystatechange()//事件处理程序
    //方法
    xhr.open("method","url",boolean)
    xhr.setRequestHeader("name","value")
    xhr.send(data)
    xhr.abort()//在接收到响应之前取消异步请求
    xhr.getResponseHeader('Content-Type')//获取响应头部信息
    xhr.getAllResponseHeaders()//返回一个包含所有头部信息（key-value）的长字符串

#### 相关链接 ####

*  [w3c中国][w3c]
 *  [大公司里怎样开发和部署前端代码？ - 知乎][-]
 *  [一文读懂前端缓存][Link 1]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][- 1] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]: /images/20220418/d9d8e168d9014841bce6b4cc5c527369.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 1]: /images/20220418/8aa94317082949a2b15de6f3f6f746e6.png
[w3c]: http://www.chinaw3c.org/
[-]: https://www.zhihu.com/question/20790576
[Link 1]: https://mp.weixin.qq.com/s/e42vFNPPxt7zcd1N0Li7pg
[- 1]: https://blog.csdn.net/wanshaobo888/article/details/86249460