前端进阶-前端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()
})
1
2
3

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秒钟内如果该资源被再次请求，则从缓存中读取。
1
2

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表示资源只能被浏览器缓存。

如何设置缓存

从前端的角度来说:

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