Yihui’s Blog

强缓存和协商缓存

为什么有这个东西?

web缓存描述 :

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

缓存的优缺点:

优点:

  • 缓存减少了冗余的数据传输,节省了你的网络费用。
  • 缓存缓解了网络瓶颈的问题。不需要更多的带宽就能够更快地加载页面。
  • 缓存降低了对原始服务器的要求。服务器可以更快地响应,避免过载的出现。
  • 缓存降低了距离时延,因为从较远的地方加载页面会更慢一些。

缺点:

  • 缓存中的数据可能与服务器的数据不一致;
  • 消耗内存;

第一阶段、强缓存验证:

根据请求头相关控制字段开始尝试命中

1、 验证位置:本地(内存或者硬盘,根据浏览器策略决定), 2、 验证字段:就两个,expires (http1.0中出现)和cache-control (http1.1中出现),如果这两个字段同时出现,cache-control会覆盖expires

image-20220323211858097

3、验证流程: 查看两个字段的指定时间,如果过期则跳到下一阶段(协商缓存)

4、如果命中: 状态码:200 (from disk cache)或是200 OK (from memory cache) 注释:根据该缓存的内存占用进行存储,内存占用过高则存入磁盘

cache-control 常用的参数:

private:客户端可以缓存 public:客户端和代理服务器均可缓存; max-age=xxx:缓存的资源将在 xxx 秒后过期,常见:2592000(三十天)、31536000(一年); no-cache:跳过当前强验证步骤,使用下一阶段协商缓存来验证是否过期; must-revalidate:如果强缓存时间过期,必须去服务器进行有效性检验这个旧的缓存 no-transform:多用于图片,不允许对资源进行转换压缩

第二阶段、协商缓存验证:

1、验证位置:服务器;

2、验证字段:有两组,Last-Modified + If-Modified-Since和ETag + If-None-Match

3、验证流程: ①Last-Modified + If-Modified-Since: 修改日期比较 上次请求时,缓存文件中的Last-Modified记录该资源的修改日期,本次请求时,Last-Modified会通过请求头If-Modified-Since传递给服务器,服务器端的最新修改日期和该缓存文件的最新修改日期比较; ② ETag + If-None-Match: 缓存验证 ETag是服务器端认为设置的一串唯一字符串(一般是哈希或者版本号),本次请求时,If-None-Match 传入缓存文件的ETag值,去和服务器里的该资源的ETag比较,以达到缓存验证的目的;

4、验证结果: ①Last-Modified + If-Modified-Since: 如果If-Modified-Since值 就是 服务器端该文件的最新修改日期,说明缓存是新鲜的,服务器返回304,浏览器使用本地缓存; 如果If-Modified-Since值 早于 服务器端该文件的最新修改日期,说明缓存不新鲜,服务器返回新的该资源,并且更新该资源Last-Modified日期 ② ETag + If-None-Match: 如果If-None-Match传递给后台的缓存ETag值和后台对应该文件的ETag值一样,说明该缓存新鲜,服务器返回 304 状态码,浏览器使用本地缓存; 如果If-None-Match传递给后台的缓存ETag值和后台对应该文件的ETag值不一样,说明该缓存不新鲜,服务器返回更新的资源和新的 Etag值;

参考内容:

浅解强缓存和协商缓存 - 掘金

浏览器缓存(强缓存、协商缓存)一遍过 - 掘金

Maintained by · YihuiEdit on GitHub

Keep reading

View all posts

分层和合成机制:为什么css动画比JavaScript高效

本文我们主要讲解渲染引擎的分层和合成机制,因为分层和合成机制代表了浏览器最为先进的合成技术,Chrome 团队为了做到这一点,做了大量的优化工作。了解其工作原理,有助于拓宽你的视野,而且也有助于你更加深刻地理解 CSS 动画和 JavaScript 底层工作机制。 显示器是怎么显示图像的 每个显示器都有固定的刷新…

Read article

宏任务和微任务:不是所有的任务都是一个待遇

在前面几篇文章中,我们介绍了消息队列,并结合消息队列介绍了两种典型的 WebAPI——setTimeout和XMLHttpRequest,通过这两个 WebAPI 我们搞清楚了浏览器的消息循环系统是怎么工作的。不过随着浏览器的应用领域越来越广泛,消息队列中这种粗时间颗粒度的任务已经不能胜任部分领域的需求,所以又出…

Read article

跨站脚本攻击XSS:为什么cookie中有httpOnly属性

通过上篇文章的介绍,我们知道了同源策略可以隔离各个站点之间的 DOM 交互、页面数据和网络通信,虽然严格的同源策略会带来更多的安全,但是也束缚了 Web。这就需要在安全和自由之间找到一个平衡点,所以我们默认页面中可以引用任意第三方资源,然后又引入 CSP 策略来加以限制;默认 XMLHttpRequest 和 F…

Read article