前端缓存机制

1. 缓存的作用

  • 加快资源加载速度,提高用户体验
  • 节省带宽,服务器端资源无需重新传输;甚至一些缓存无需进行Http请求
  • 服务器端缓存,如(CDN)可以减缓多用户并行请求的压力,减轻服务器压力

2. 缓存的分类

  • 服务器缓存 如(CDN)
  • 客户端缓存 (浏览器缓存)

3.浏览器缓存机制

  • 强缓存: 本地进行缓存过期时间的比较。若时间没有过期,则直接从本地获取缓存的资源,无需向服务器端发起请求。

  • 协商缓存:发起Http请求,请求头中包含一些协商缓存的字段,与服务器端进行比较,若资源没有修改,则服务器端返回304状态码,客户端则可以直接从缓存中获取资源,反之香服务器端发起求获取最新资源。

强缓存

  • Expires: 浏览器第一次发起请求,服务器端返回资源时带有一个Expires字段,该字段由服务器端计算所得,表示缓存过期的时间期限
    1. 具体判断是否过期:Expires < 当前客户端时间
    2. 该缓存有个弊端:Expires的时间是由服务器端计算所得,计算依据为服务器端第一次请求时间,而当前判断缓存时,与客户端时间做比较,倘若两端的时间不同呢?所以还是不够可靠
  • Cache-Control:第一次发起请求,资源会存储当前时间,并且保存一个max-age。

具体判断是否过期:
第一次请求的客户端时间 + max-age < 当前客户端时间
max-age为第一次请求的时候服务器端发送的过期时间间隔,而两次比较都是客户端时间,因此可以解决Expires不准确的缺点。

注:Cache-Control的优先级比Expires高

协商缓存

  • Last-Modified , If-Modified-Since
  • Last-Modified:浏览器端发送请求时,服务器端返回Last-Modified告诉浏览器资源最后修改的时间,浏览器则把该时间存储到资源中。

  • If-Modified-Since:当强缓存的资源过期时,若资源中有Last-Modified字段,则浏览器将Last-Modified的时间赋值给If-Modified-Since,浏览器发起请求,将If-modified-Since字段包含在请求Header中,服务器端获得该字段,将其与服务器端对应资源最后的修改时间进行对比,倘若服务器端时间较旧,则返回304,不包含消息体;反之则正常请求。

确定:只能精确到秒级,在秒级内的操作无法精确; 若资源定期生成,但内容不变,此时Last-Modified会发生改变,则无法进行缓存了。

  • Etag,If-None-Match

该缓存方法的原理与Last-Modified相同;区别:Etag的值默认由服务器端中对文件的索引(INode)、大小(Size)和最后修改时间(MTime)进行Hash后生成。

注:Etag的优先级高于Last-Modified


   转载规则


《前端缓存机制》 echo丶若梦 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
手写一个call、apply、bind 手写一个call、apply、bind
手写一个 new new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作: 1.创建一个空的简单JavaScript对象(即{ } ); 2.链接该对象(即设置该对象的构造函数)到
2020-08-03
下一篇 
js下载导出Excel文件以及ie兼容问题 js下载导出Excel文件以及ie兼容问题
方法一 使用a标签下载-- 使用a标签下载, download 属性,`url` 是所要下载的地址,注意IE浏览器不支持 `<a href={`${url}`} download>导出</a>`方法二 接口返会的是
2020-07-29
  目录