HTTP 缓存的关键路径

Anleb 发布于2019-08-06 13:24 / 911人阅读

摘要：其关键路径如下图所示图缓存关键路径三关键路径之验证缓存浏览器发起一个请求，生成报文，先发送到缓存器，缓存器验证是否有本地缓存，缓存是否过期等，即图的第一条路径，称之为验证缓存。

一、证件照场景

拍一次证件照麻烦且费钱，因此每次拍的时候我们都会多留几张备用。这就是计算机世界的缓存，在现实世界中的写照。

如果某个行为很消耗资源，很麻烦，那在实现它的时候就顺便多保留几份，这种行为就是缓存。特点很明显

容量有限，我们不可能留一屋子的备用照片

有时效性，小时候的证件照长大了不能用吧

二、HTTP 缓存

缓存是一个比较笼统的概念，几乎任何行为都可以将结果缓存起来，尤其那些模块与模块的连接处，例如计算机世界的数据库查询，网络I/O等等，而人类世界诸如找人事部开收入证明、去婚姻登记处开未婚证明等等基本上会多开两三份。

本文讨论的是 HTTP 协议层面的缓存，它规范了浏览器和服务器在发送和接收到 HTTP 报文时，应该怎么解析和处理其中的缓存逻辑。其关键路径如下图所示

图 1 HTTP 缓存关键路径

三、关键路径之验证缓存

浏览器发起一个请求，生成 HTTP 报文，先发送到缓存器，缓存器验证是否有本地缓存，缓存是否过期等，即图 1 的第一条路径，称之为验证缓存。

这个过程有三种结果：

不存在缓存

存在缓存，且缓存未过期（由 Cache-control 或 Epire 决定）

存在缓存，但缓存已过期

如果存在缓存，且缓存未过期，则使用缓存响应客户请求，而不会向服务器发送请求。其它两种情况，都会将 HTTP 报文发送给服务器，那么服务器将怎么处理？

四、关键路径之服务器再验证

HTTP 报文经过缓存器进行验证后，除了使用本地缓存的情况，其他都会向服务器发请求，服务器处理逻辑如下

本地不存在缓存情况，报文将直接被发送给服务器，服务器响应请求，并且在响应的报文中带上资源的缓存控制信息

如果本地存在缓存，但缓存已过期，那么缓存器将在请求报文中带上 if-None-Match（取值对应ETag）和 if-Modified-Since （取值对应 Last-Modified），服务器分别对这两个字段进行校验。有更新则返回新的资源文件、新缓存控制信息；没有更新则返回 304、以及新的缓存控制信息，浏览器更新缓存，并响应本地缓存文件。

服务器响应的缓存控制信息，包含Cache-Control 和 Expire，以及 ETag 和 Last-Modified，如图2

图2 服务器正常响应包含的缓存控制信息

五、小结

完整的关键路径，存在以下可能

图3 缓存关键路径的几种情况

浏览器第一次访问某文件，本地无缓存，服务器响应文件资源，并包含 Cache-Control 和 Expire，浏览器缓存器据此缓存资源。报文还会包含 ETag 和 Last-Modified

浏览器再次请求该文件，如果有缓存，由缓存信息中的 Cache-Control 和 Expire 决定缓存是否过期，没过期则直接使用缓存；过期则利用ETag 和 Last-Modified 询问服务器是否修改过该文件，服务器验证后，发现文件修改过则响应新的文件和缓存控制信息，缓存器更新缓存并响应新文件；若未修改过则返回304和缓存控制信息，缓存器更新缓存控制信息，并响应本地缓存文件给浏览器

六、问题

完整的关键链路已经说完！比较理想的情况下，有ETag、Last-Modified，有Cache-Control、Expire，但实现又不总是完美的，关于缓存还有以下问题需要弄清楚

服务器没有响应 Cache-Control、Expire 会出现什么情况？这种情况下，ETag 和 Last-Modified 还有用吗？

ETag 和 Last-Modified 功能有些类似，它们的作用有何区分？Expire 和 Cache-Control max-age 存在同样的问题。

ETag 是什么？Last-Modified 又是什么？

怎么设置这些头部信息？

浏览器点击刷新按钮，点击重新加载会出现什么情况？客户端向服务器发送Cache-Control 会出现什么情况
Cache-Control 的取值有很多，各自的意义是什么？

云服务器私有云 http服务器的缓存 HTTP缓存 HTTP缓存字段的关键技术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/61891.html

HTTP 缓存的相关协议

摘要：上一篇文章梳理缓存的关键路径。这条路径的完成，依赖于协议。首次验证相关协议服务器在响应报文中设置或，缓存器对资源进行缓存。再次请求同一资源时，缓存器通过检查和，决定缓存是否过期的过程称为首次验证。因此，有双向控制缓存的能力。上一篇文章梳理 HTTP 缓存的关键路径。浏览器发起 HTTP 请求，请求报文发往浏览器内置的缓存器，缓存器经过首次验证，再决定是否向服务器发起缓存的再次验证。...

HelKyle 2019-08-06 13:24 评论0 收藏0
不简单的前端性能优化

摘要：本文主要介绍关键渲染路径与网络两个方面的性能优化并提供，篇幅较长建议电脑观看。百度统计代码注意，的脚本不会被阻塞，完成后立即执行，但是有可能会阻塞关键渲染路径。本文主要介绍关键渲染路径与网络两个方面的性能优化并提供demo，篇幅较长建议电脑观看。前端优化的方面太多，本文介绍的仅仅是其中的一部分，力求涵盖关键渲染路径的方方面面，及一些不常被提到的网络优化部分。测试环境如无特殊说明均...

RobinQu 2019-08-29 12:30 评论0 收藏0
不简单的前端性能优化

摘要：本文主要介绍关键渲染路径与网络两个方面的性能优化并提供，篇幅较长建议电脑观看。百度统计代码注意，的脚本不会被阻塞，完成后立即执行，但是有可能会阻塞关键渲染路径。本文主要介绍关键渲染路径与网络两个方面的性能优化并提供demo，篇幅较长建议电脑观看。前端优化的方面太多，本文介绍的仅仅是其中的一部分，力求涵盖关键渲染路径的方方面面，及一些不常被提到的网络优化部分。测试环境如无特殊说明均...

developerworks 2019-08-20 16:07 评论0 收藏0
不简单的前端性能优化

摘要：本文主要介绍关键渲染路径与网络两个方面的性能优化并提供，篇幅较长建议电脑观看。百度统计代码注意，的脚本不会被阻塞，完成后立即执行，但是有可能会阻塞关键渲染路径。本文主要介绍关键渲染路径与网络两个方面的性能优化并提供demo，篇幅较长建议电脑观看。前端优化的方面太多，本文介绍的仅仅是其中的一部分，力求涵盖关键渲染路径的方方面面，及一些不常被提到的网络优化部分。测试环境如无特殊说明均...

hedge_hog 2019-08-01 16:45 评论0 收藏0