web缓存策略整理

目录

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

web缓存策略整理

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

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


1 强缓存与协商缓存

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

1-1 强缓存

与强缓存相关的header字段包含ExpirePragma(http 1.0中使用)与Cache-control(http 1.1中使用)。

Created with Raphaël 2.2.0 浏览器请求 存在缓存 Cache-control 规则? Expire 是否过期? 从服务器获取资源 检查协商缓存规则 结束 从缓存中获取资源 yes no yes no

以上流程图简单介绍了整个协商缓存的过程,其中最重要的一部分就是 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/EtagIf-Modified-Since/Last-Modified(请求头/响应头)。
Etag 表示请求资源的实体,其具体值由服务端决定算法生成。浏览器从服务端获取资源后,服务端在响应的请求头中附上Etag信息,由浏览器对其进行记录。当浏览器再次请求资源时,请求头中附上If-None-Match字段,服务端对比其Etag值与当前有效资源的Etag值,判断两者是否相等从而决定是否允许浏览器使用缓存内容。
Last-Modified 表示请求资源最后一次更改的时间。与Etag类似,服务端在请求头中附上If-Modified-Since,并由服务端判断决定是否使用缓存。
协商缓存流程图如下所示:

Created with Raphaël 2.2.0 浏览器请求 存在缓存 检查强缓存规则 存在Etag?Last-Modified? If-None-Match/If-Modified-Since 服务器决定是否304? 从缓存中获取资源 结束 从服务器获取资源 yes no yes no

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

2 应用程序缓存

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


<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/中所有页面的回退页面

小结

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

你可能感兴趣的:(计算机网络)