javascript 前端缓存

最新推荐文章于 2024-05-25 11:21:44 发布

浅海鱼~

最新推荐文章于 2024-05-25 11:21:44 发布

阅读量1.1k

点赞数 5

分类专栏：缓存文章标签：缓存前端 javascript

本文链接：https://blog.csdn.net/qq_37440870/article/details/126258871

版权

缓存专栏收录该内容

1 篇文章 0 订阅

订阅专栏

缓存

不妨思考以下问题：
在开发中有没有涉及到缓存？
前端缓存都有哪些？
缓存又该怎么去设置呢？

1.缓存分类

前端缓存主要分为：

HTTP缓存
浏览器缓存

在这里插入图片描述

2.HTTP 缓存分类

1.强缓存
2.协商缓存

两者的主要区别是使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效。
协商缓存，就是需要和服务器进行协商，最终确定是否使用本地缓存。

2.1 强缓存

当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高

Expires

响应头，代表该资源的过期时间。是一个GMT 格式的标准时间。
当客户端请求服务器的时候，服务器会返回资源的同时还会带上响应头Expires，表示资源的过期具体时间，如果客户端在过期时间之前再次获取该资源，就不需要再请求我服务器了，可以直接在缓存里面拿

1.Expires优点：

在过期时间以内，为用户省了很多流量。
减少了服务器重复读取磁盘文件的压力。

2.Expires缺点：

缓存过期以后，服务器不管文件有没有变化会再次请求服务器。
缓存过期时间是一个具体的时间，这个时间依赖于客户端的时间，如果时间不准确或者被改动缓存也会随之受到影响。

Cache-Control

符合缓存策略时，服务器不会发送新的资源，但不是说客户端和服务器就没有会话了，客户端还是会发请求到服务器的。
Cache-Control除了在响应中使用，在请求中也可以使用。我们用开发者工具来模拟下请求时带上Cache-Control：勾选Disable cache，刷新页面，可以看到Request Headers中有个字段Cache-Control: no-cache。

在这里插入图片描述

Cache-Control 服务端参数：

max-age: 在多少秒内有效，是一个相对时间，这样比Expires具体的时间就更精确了。
s-maxage: 就是用于表示 cache 服务器上（比如 cache CDN，缓存代理服务器）的缓存的有效时间的，并只对 public 缓存有效。
no-cache：不使用本地强缓存。需要使用缓存协商。
no-store：直接禁止浏览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
public：可以被所有的用户缓存，包括终端用户和中间代理服务器。
private：只能被终端用户的浏览器缓存，不允许中间缓存代理进行缓存，默认的。

Cache-Control 客户端参数：

max-stale: 5 表示客户端到代理服务器上拿缓存的时候，即使代理缓存过期了也不要紧，只要过期时间在 5 秒之内，还是可以从代理中获取的。
min-fresh: 5 表示代理缓存需要一定的新鲜度，不要等到缓存刚好到期再拿，一定要在到期前 5 秒之前的时间拿，否则拿不到。
only-if-cached 这个字段加上后表示客户端只会接受代理缓存，而不会接受源服务器的响应。如果代理缓存无效，则直接返回 504（Gateway Timeout）

2.2 协商缓存

仅仅是以缓存过期了并不意味着他和原始服务器目前处于活跃状态的文档有实际的区别,这只是意味着到了要进行核对的时间了,这种情况被称为协商缓存,说明缓存需要询问原始服务器是否发生变化

如果再验证显示内容发生了变化,缓存会获取一份新的文档副本,并将其存储在旧文档的位置上,然后将文档发送给客户端。
如果再验证内容没有发生变化,缓存只需要获取新的首部,包括一个新的过期日期,并对缓存中的首部进行更新,并对缓存中的首部进行更新就行了

HTTP的条件方法可以高效的实现再验证。HTTP允许缓存向原始服务器发送一个条件GET,请求服务器只有在文档与缓存中现有的副本不同时,才回送对象主体,对于缓存在验证来说最有用的2个首部时

If-Modified-Since: / Last-Modified

If-Modified-Since: :
如果从指定日期之后,文档被修改了,就执行请求的方法。可以与Last-Modfied服务器响应首部配合使用,只有在内容修改后与已缓存版本有所不同的时候才去获取内容

If-None-Match:
服务器可以为文档提供特殊的标签(ETag),而不是将其与最近修改日期向匹配,这些标签就像序列号一样。如果已缓存标签与服务器文档中的标签有所不同,If-None-Match首部就会执行所请求的方法
If-Modified-Since: / Last-Modified:
1.客户端第一次向服务器发起请求,服务器将最后的修改日期(Last-Modified)附加到所提供的文档上去
2.当再一次请求资源时间,如果没有命中强缓存,在执行在验证时,会包含一个If-Modifed-Since首部,其中携带有最后修改已缓存副本的日期: If-Modified-Since:
3.如果内容被修改了,服务器回送新的文档,返回200状态码和最新的修改日期
4.如果内容没有被修改,会返回一个304 Not Modified响应

If-None-Match / ETag
有些情况下仅使用最后修改日期进行再验证是不够的

有些文档有可能会被周期性的重写(比如: 从一个后台进程中写入),但实际上包含的数据常常是一样分,尽管内容没有变化,但修改日期会发生变化
有些文档可能被修改了,但所做修改并不重要.不需要让世界范围内的缓存都重装数据(比如填写注释)
有些服务器无法准确判定其页面的最后修改日期
有些服务器提供的文档会在毫秒间隙发生变化(比如,实时监视器),对这些服务器来说,以一秒为粒度的修改日期可能就不够用了
在这里插入图片描述

2.3 缓存位置

1.memory cache
2.disk cache
3.Service Worker
我们可以在 Chrome 的开发者工具中，Network -> Size 一列看到一个请求最终的处理方式：如果是大小 (多少 K，多少 M 等) 就表示是网络请求，否则会列出 from memory cache、from disk cache、from ServiceWorker就表示命中了缓存。

memory cache 是内存中的缓存，(与之相对 disk cache 就是硬盘上的缓存)。按照操作系统的常理：先读内存，再读硬盘。
在这里插入图片描述

disk cache 也叫 HTTP cache，顾名思义是存储在硬盘上的缓存，因此它是持久存储的，是实际存在于文件系统中的。而且它允许相同的资源在跨会话，甚至跨站点的情况下使用，例如两个站点都使用了同一张图片

上述的缓存策略以及缓存/读取/失效的动作都是由浏览器内部判断进行的，我们只能设置响应头的某些字段来告诉浏览器，而不能自己操作。service work给予了我们另外一种更加灵活，可以直接的操作方式。我们可以从 Chrome 的 Application找到Service Workers。这个缓存是永久性的，即关闭 TAB 或者浏览器，下次打开依然还在(而 memory cache 不是)。有两种情况会导致这个缓存中的资源被清除：手动调用 API cache.delete(resource) 或者容量超过限制，被浏览器全部清空。

下一篇：浏览器缓存