web缓存策略整理

来源：互联网发布：用友t3数据保存在哪编辑：程序博客网时间：2024/06/01 16:19

web缓存策略整理

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

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

web缓存策略整理
- 强缓存与协商缓存
  - 1-1 强缓存
  - 1-2 协商缓存
- 应用程序缓存
- 小结

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.jsNETWORK:login.aspFALLBACK:/html5/ /404.html# 上述语句表明将404.html作为/html5/中所有页面的回退页面

小结

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

阅读全文

0 0