浏览器缓存

瑶瑶旺仔

于 2023-05-28 08:19:05 发布

阅读量782

点赞数

文章标签：前端缓存 javascript

本文链接：https://blog.csdn.net/waouya/article/details/130909094

版权

前段时间学长总结了我们接下来需要学习的内容，我准备一边学着自己想要去学习的新内容，一边去学习一些面试要问到的知识。下面是关于浏览器缓存的一些内容，整理的可能还不太全。

Memory Cache(内存缓存)
Service Worker
Disk Cache(硬盘缓存)
Push Cache(推送缓存)
如果没有在上面的缓存位置中找到对应的资源，浏览器就会向服务器发送请求，获取最新的资源，但是，如果服务器返回的响应头中包含了缓存策略（如：Cache-Control、Expires等）,浏览器会根据缓存策略来判断是否需要使用缓存，如果缓存策略中指定了资源可以缓存，并且缓存时间还没有过期，浏览器就可以使用缓存，否则，浏览器就会重新请求资源。

Service Worker

和WebWorker类似，是独立的线程，我们可以在这个线程中缓存文件，在主线程需要的时候读取这里的文件，Service Worker使我们可以自由选择缓存哪些文件以及文件的匹配、读取规则，并且缓存是持续性的。它可以在离线状态下使用。
Memory Cache(内存缓存)

内存缓存，是最快的缓存位置，但只是在浏览器打开期间有效，内存缓存不是持续性的，缓存会随着进程的释放而释放。
Disk Cache(硬盘缓存)

硬盘缓存，是最常用的缓存，可以在浏览器关闭后仍然有效，相较于内存缓存的持续性和容量更优，它会根据HTTP header字段判断哪些资源需要缓存
Push Cache(推送缓存)

推送缓存，是HTTP/2的内容，只能在HTP/2协议下使用，目前应用较少

浏览器缓存策略分为两种：强缓存（本地缓存）和协商缓存（弱缓存），在发送请求之前，先检查强缓存，若没有找到对应的资源，就发起请求判断是否需要弱缓存。

强缓存是不发起请求的，直接使用缓存内的内容，浏览器将js、css、image、font-family等存到内存（存小文件）或者磁盘（存大文件），下次用户再次访问时就存内存中取出，提升性能。
协商缓存：需要往后台发送请求，通过判断来决定是使用协商缓存，如果请求内容还没发生变化，则请求返回304（服务器收到请求，但内容无变化），浏览器就用浏览器缓存内的内容。

如何触发强缓存

http1.0使用Expires响应标头

如果服务器返回的响应头中包含Expires（时间戳），那么客户端发送请求的时间在Expires之前的话，就触发强缓存。

http1.1使用Cache-Control响应标头

同样是服务器返回的一个相应标头，提供一些配置选项，其优先级比Expires高

CACHE-DIRECTIVE	说明
public	所有内容都将被缓存（客户端和代理服务器都可缓存）
private	内容只缓存到私有缓存中（进客户端可以缓存，代理服务器不可缓存）
no-cache	必须先与服务器确认返回的响应是否更改，然后才能使用该相应来满足后续对同一网址请求。因此，如果存在合适的验证令牌（ETag），no-cache会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。
no-store	所有内容都不会被缓存到缓存或者Internet临时文件中
must-revalidation/proxy-revalidation	如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
max-age=xxx(xxx is numeric)	缓存内容将在xxx秒后失效，这个选项只在HTTP1.1可用，并如果和Last-Modified一起使用，优先级较高。

如何触发协商缓存
1. http1.0使用请求头：If-Modified-Since，响应头：Last-Modified
  
  服务器在上次响应请求时，返回一个带Last-Modified的响应头，值为一个时间戳，表示该资源最后一次在服务器修改的时间，当客户端再一次请求这个资源的时候，请求头就会带上If-Modified-Since，值为上次服务器发来的Last-Modified，服务器收到后，就和该资源最后修改时间对比，没变化就返回304，触发协商缓存。
  
  弊端：时间间隔最小是1s，如果请求的资源在1s内发生了改变，可能触发协商缓存，导致为u发获取到最新的资源。
2. http1.0使用请求头：If-None-Match，响应头： Etag
  
  为解决间隔最小1s的问题， If-None-Match和Etag就诞生了。 Etag是由服务器生成的，是每个资源的唯一标识字符串，随资源变化而改变。判断过程和http1.0的一致，请求的时候携带 If-None-Match，然后服务器比较这两个值，没变化就返回304，触发协商缓存。弊端：占用服务器资源较多，虽然准确度高，但是性能上不如Last-Modified & If-Modified-Since的方法。不过实际的影响不会很大，基本上可以忽略不计。