web缓存策略整理

最新推荐文章于 2025-05-15 19:26:21 发布

草半

最新推荐文章于 2025-05-15 19:26:21 发布

阅读量687

点赞数 1

CC 4.0 BY-SA版权

分类专栏：计算机网络文章标签： web前端缓存

本文链接：https://blog.csdn.net/qq_35368183/article/details/78125159

计算机网络专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTTP缓存中的强缓存和协商缓存策略，详细解析了相关Header字段，如Cache-Control、Expires、Etag和Last-Modified，并探讨了它们在确保Web性能和资源更新中的作用。此外，还提及了HTML5应用程序缓存作为Web应用层面的缓存解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web缓存策略整理

秋招季已经告一段落了，拼命恶补web前端边边角角知识的过程也结束了，很遗憾没有找到理想的工作最终还是选择保研的道路，但是在这段学习的过程中有许多的收获还是应该值得记录一下。一来方便自己以后翻看，二来是为自己留个念想。

本篇博客关于web相关的缓存策略整理，包含了强缓存、协商缓存以及应用程序缓存。

1 强缓存与协商缓存

强缓存与协商缓存都是在http的层面上进行讨论的，但是两者相关联的header字段不同，规则不同。同时遵循强缓存策略读取缓存时，http 响应信息状态码为 200，而遵循协商缓存策略读取缓存时，http响应信息状态码为 304。
浏览器首次访问服务器资源时，与服务器进行缓存机制的协商，之后根据对应机制判断从缓存中读取资源或者从服务器获取资源。

1-1 强缓存

与强缓存相关的header字段包含Expire、Pragma（http 1.0中使用）与Cache-control（http 1.1中使用）。

以上流程图简单介绍了整个协商缓存的过程，其中最重要的一部分就是 http 1.1 协议中新增的 Cache-control 字段规则。由于其会覆盖其他规则，所以将其放在第一个进行介绍。

字段值	作用
no-store	对所有资源禁止进行本地缓存
no-cache	强制要求从服务器请求资源，禁止使用缓存资源
max-age	在某一段时间后过期
public	缓存所有资源
private	缓存只对某用户有效

相比较而言，http 1.0 协议中所使用的 Pragma 字段仅仅实现了no-cache的功能。

Expire 字段信息与Cache-control中max-age相类似，都是通过时间进行缓存资源可用性的判断。区别在于：max-age信息为缓存资源的有效时长，而Expire信息则是缓存资源过期的时间点。两者看似比较相似，但是实际使用过程中，http 1.1协议所提出的max-age功能与Expire相比更具有鲁棒性。由于全球各地时间因时区差异，存在一定区别，因此在使用Expire时服务器时间与用户终端时间可能存在差异，使得Expire规则不再可靠。

1-2 协商缓存

与协商缓存相关的header字段包括：If-None-Match/Etag，If-Modified-Since/Last-Modified（请求头/响应头）。
Etag 表示请求资源的实体，其具体值由服务端决定算法生成。浏览器从服务端获取资源后，服务端在响应的请求头中附上Etag信息，由浏览器对其进行记录。当浏览器再次请求资源时，请求头中附上If-None-Match字段，服务端对比其Etag值与当前有效资源的Etag值，判断两者是否相等从而决定是否允许浏览器使用缓存内容。
Last-Modified 表示请求资源最后一次更改的时间。与Etag类似，服务端在请求头中附上If-Modified-Since，并由服务端判断决定是否使用缓存。
协商缓存流程图如下所示：

其中Last-Modified与Etag应当为或条件，没有先后的优先级，如果Etag和Last-Modified在浏览器中存在都会附加在请求头中。//待考证

2 应用程序缓存

与强缓存和协商缓存相比，应用程序是处在web应用的层面上的。同时应用程序缓存允许用户进行离线使用，方便用户在没有网络连接的情况下使用web服务。
应用程序缓存是 HTML5 提出的新功能，允许用户在html文件的<html>标签中增加 manifest 属性，用于声明各个文件的缓存规则：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
balabala...
</html>

其中， manifest 包含三个部分：

功能	作用
CACHE MANIFEST	将标识的文件进行缓存
NETWORK	对标识的文件禁用缓存，强制要求联网使用
FALLBACK	规定页面无法访问时的回退页面

manifest文件示例如下：

CACHE MANIFEST
# 这是一段注释
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html
# 上述语句表明将404.html作为/html5/中所有页面的回退页面

小结

这是我写的第一篇博客，也该算是一个还没入门的前端小鶸踏出的第一步吧，虽然博客里面还有许多含糊不清的地方，一些规则和概念我仍然不甚清楚，但是终归也算是可喜可贺的一件事。希望我能继续坚持下去吧。

web缓存策略整理

目录

web缓存策略整理

1 强缓存与协商缓存

1-1 强缓存

1-2 协商缓存

2 应用程序缓存

小结