前端进阶-前端web缓存

web缓存主要指的是两部分:浏览器缓存http缓存

浏览器缓存:

比如,localStorage,sessionStorage,cookie等等。

http缓存:

Web缓存是可以自动保存常见文档副本的 HTTP 设备。当 Web 请求抵达缓存时,
如果本地有“已缓存的”副本,就可以从本地存储设备而不是原始服务器中提取这个文档。

缓存的使用场景:

其实日常的开发中,我们最最最最关心的,还是"更快的加载页面";尤其是对于react/vue等SPA(单页面)应用来说,首屏加载是老生常谈的问题。这个时候,缓存就显得非常重要。不需要往后端请求,直接在缓存中读取。速度上,会有显著的提升。是一种提升网站性能与用户体验的有效策略。

缓存可以解决什么问题?

1.减少不必要的网络传输,节约宽带(就是省钱)
2.更快的加载页面(就是加速)
3.减少服务器负载,避免服务器过载的情况出现。(就是减载)

他的缺点是什么?

占内存(有些缓存会被存到内存中)

http缓存又分为两种两种缓存,强制缓存协商缓存,本文主要讲述强制缓存

强制缓存
强制缓存,我们简称强缓存。
从强制缓存的角度触发,如果浏览器判断请求的目标资源有效命中强缓存,如果命中,则可以直接从内存中读取目标资源,无需与服务器做任何通讯。
Expires
在以前,我们通常会使用响应头的Expires字段去实现强缓存。

res.writeHead(200,{
Expires:new Date("2022-8-15 14:30:30").toUTCString()
})

在这里插入图片描述
Expires字段的作用是,设定一个强缓存时间。在此时间范围内,则从内存(或磁盘)中读取缓存返回。
比如说将某一资源设置响应头为:Expires:new Date(“2022-7-30 23:59:59”);
那么,该资源在2022-7-30 23:59:59 之前,都会去本地的磁盘(或内存)中读取,不会去服务器请求。
但是,Expires已经被废弃了。对于强缓存来说,Expires已经不是实现强缓存的首选。
因为Expires判断强缓存是否过期的机制是:获取本地时间戳,并对先前拿到的资源文件中的Expires字段的时间做比较。来判断是否需要对服务器发起请求。这里有一个巨大的漏洞:“如果我本地时间不准咋办?”
是的,Expires过度依赖本地时间,如果本地与服务器时间不同步,就会出现资源无法被缓存或者资源永远被缓存的情况。所以,Expires字段几乎不被使用了。现在的项目中,我们并不推荐使用Expires,强缓存功能通常使用cache-control字段来代替Expires字段。

cache-control

在http1.1中被增加,Cache-control完美解决了Expires本地时间和服务器时间不同步的问题。是当下的项目中实现强缓存的最常规方法。

Cache-control的使用方法页很简单,只要在资源的响应头上写上需要缓存多久就好了,单位是秒。比如

res.writeHead(200,{"Cache-Control":"max-age=10"})
//从该资源第一次返回的时候开始,往后的10秒钟内如果该资源被再次请求,则从缓存中读取。

Cache-Control:max-age=N,N就是需要缓存的秒数。从第一次请求资源的时候开始,往后N秒内,资源若再次请求,则直接从磁盘(或内存中读取),不与服务器做任何交互。
Cache-control中因为max-age后面的值是一个滑动时间,从服务器第一次返回该资源时开始倒计时。所以也就不需要比对客户端和服务端的时间,解决了Expires所存在的巨大漏洞

Cache-control有max-age、s-maxage、no-cache、no-store、private、public这六个属性。

max-age决定客户端资源被缓存多久。
s-maxage决定代理服务器缓存的时长。
no-cache表示是强制进行协商缓存。
no-store是表示禁止任何缓存策略。
public表示资源即可以被浏览器缓存也可以被代理服务器缓存。
private表示资源只能被浏览器缓存。

如何设置缓存

从前端的角度来说:

你什么都不用干,缓存是缓存在前端,但实际上代码是后端的同学来写的。如果你需要实现前端缓存的话啊,通知后端的同学加响应头就好了。
总的来说,前端缓存你可以不用,但是必须要知道的。毕竟有时候面试高级前端的时候,八成会问道。哈哈哈…

你可能感兴趣的:(js,前端,缓存,javascript)