HTTP浏览器缓存机制

浏览器缓存

浏览器缓存就是把一个以及请求过的Web资源(如html页面,图片,数据,js等等)拷贝一份副本存储在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。

使用缓存

(1) 减少网络带宽消耗

(2) 降低服务器压力

(3) 减少网络延迟,加快页面打开速度

浏览器缓存规则

规则是在HTTP协议头信息(cache-control)和HTML页面的meta标签中定义的。从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本,还是需要去服务器获取更新的版本

`新鲜度(过期机制)`:也就是浏览器副本有效期。一个缓存副本必须满足以下条件,浏览器会认为它是足够新的。

    * 含有完整的过期时间控制有信息(HTPP协议报头),并且仍在有效期内
    * 浏览器以及使用过这个缓存副本,并且在一个会话中已经检查过新鲜度

`校验值(验证机制)`:服务器返回资源的时候有时在控制头信息带上这个资源的实体标签ETag(EntityTag),它可以作为浏览器再次请求过程的校验标识。如果发现标识不匹配,说明资源已经被修改或过期,浏览器需重新获取资源内容。

ETag: “195-58226db2f14fc”

If-Modified-Since: Mon, 18 Feb 2019 08:24:41 GMT

If-None-Match: “195-58226db2f14fc”

如果从 Mon, 18 Feb 2019 08:24:41 GMT 这个时间短以后图片修改过则重新请求,如果该图片最新的ETag和If-None-Match的值不匹配则重新请求

第二次响应信息为304意味着从本地取缓存,节省了图片在网络上传输的时间


  Reprint please specify: 云深不知处 HTTP浏览器缓存机制

 Previous
p标签不能内嵌div p标签不能内嵌div
p标签不能内嵌div在开发,我在p内嵌了div,发现div单独出来了 它的开始标签<p>和结束标签</p>都会被浏览器会解析为: <p></p> 所以我们的页面代码会被解析成 <p><
Next 
克隆/** * 浅克隆对象只会被克隆最外部的一层, * 至于更深层的对象,则依然是通过引用指向同一块堆内存. * @param {*} o */ function shallow(o) { const obj = {}
2019-02-17 卓文智
  TOC