前端缓存机制

javascript/jquery

浏览数:27

2020-6-12

AD:资源代下载服务

什么是缓存?

缓存可以认为是资源的副本。它与本地缓存localStorage等不一样,本地缓存更多的是数据记录,数据量小;而缓存是为了减少请求,多用于文件,存储量大。
前端缓存主要可以分为http缓存和浏览器缓存。

这里先解释一下后面会出现的词

  • 命中缓存:访问的数据在缓存中

http缓存

什么是http缓存

http缓存其实就是:当客户端向服务器端发送请求的时候,会先访问浏览器缓存,如果浏览器缓存中有请求的资源,那就不向服务器发送请求,而使用缓存的资源。

这里涉及到了浏览器加载一个页面的流程,简单来说就是:

  1. 浏览器判断http请求头中的信息,看是否命中强缓存,如果命中就去缓存里找,而不向服务器端发送请求;
  2. 如果强缓存命中失败,则会进行协商缓存,也就是浏览器会发送请求到服务器端,服务器会判断浏览器本地缓存是否失效。如果未失效,则服务器会返回304,浏览器继续加载缓存的资源;
  3. 如果未命中协商缓存,则服务器会返回完整的请求资源信息给浏览器,浏览器加载新资源,并且更新缓存。

http缓存可以分为强缓存和协商缓存:

什么是强缓存?

强缓存是利用http请求头的Cache-Control和expires两个字段控制的,表示资源过期的时间。
命中强缓存时,浏览器是不会向服务端发送请求的。然后返回的状态码是200,这种速度很快,性能也很好。但是有些时候我们可能改了一些样式,刷新发现页面一点变化都没有,就是因为强缓存导致的,这时我们可以按Ctrl+F5进行强制刷新。

  • Cache-Control

缓存的相对时间,比如说Cache-Control:3600,就是指改资源被缓存的时间为3600秒,过后就失效了。

  • Expires

指缓存的过期时间,一旦超过这个时间点,缓存就失效了。

当这两者同时存在的时候,Cache-Control的优先级要高些。

(Pragma是http1.0存在的,在http1.1中被废弃了,如果三者同时存在,Pragma的优先级是最高的)

什么是协商缓存?

浏览器发送请求给服务器,服务器会根据http请求头的Last-Modify/If-Modify-Since或Etag/If-None-Match判断对比资源是否更新了,这可以当作是浏览器和服务器的协商过程,如果服务器的资源较上次没有修改,http状态码返回304,浏览器从缓存中加载资源。如果修改了,则返回状态码200,并且将更新后的资源以及缓存信息一起返回。

  • Last-Modify/If-Modify-Since

Last-modify/If-Modify-Since是一个时间标识该资源的最后修改时间,是检查服务器端资源是否更新的一种方式。

  • Etag/If-None-Match

Etag/If-None-Match返回的是一个校验码(ETag: entity tag)。ETag可以保证每一个资源是唯一的,资源变化都会导致ETag变化*。ETag值的变更则说明资源状态已经被修改。

执行流程是这样子的:
当浏览器第一次向服务器发送http请求时,会在响应头返回Last-Modify和ETag;然后浏览器在第二次向服务器发送请求的时候会在请求头带上与ETag对应的If-None-Match,以及与Last-Modify对应的If-Modify-Since。服务器接收到请求之后,会对这两个参数进行对比,如果返回状态码为304,则说明资源没有被修改。

浏览器缓存

浏览器缓存包括了cookie,WebStorage(LocalStorage,SessionStorage)等。

cookie

cookies是保存在客户端的纯文本信息,主要用于用户信息的存储,容量为4KB。

用法

创建 cookie

document.cookie="username=John Doe";

给cookie添加过期时间

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

通过path参数告诉浏览器cookie的路径

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

读取cookie

var ck = document.cookie // 以文本方式返回所有cookie

localStorage

localStorage的数据一直保存在浏览器,直到用户手动清除浏览器缓存为止,容量为5MB。

用法

var localStorage = window.localStorage

存储数据

localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令

读取数据

localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值

localStorage.name // "caibin"

localStorage.valueOf() //读取存储在localStorage上的所有数据

localStorage.key(0) // 读取第一条数据的变量名(键值)

//遍历并输出localStorage里存储的名字和值

for(var
i=0; i<localStorage.length;i++){

  console.log('localStorage里存储的第'+i+'条数据的名字为:'+localStorage.key(i)+',值为:'+localStorage.getItem(localStorage.key(i)));

}

删除数据

localStorage.removeItem("name"); //undefined

清空localStorage

localStorage.clear()

sessionStorage

sessionStorage与localStorage属性相同,不同的是在关闭当前页面时,它就会被清除。

用法与localStorage一致

cookie,localStorage,sessionStorage的区别

作者:叻妮