针对Web开发人员的浏览器缓存指南（翻译）

原始链接

个人文章在wangtianlun / blog中进行了总结

摘要

缓存是非常重要且非常复杂的浏览器功能

在本文中，我们将解释浏览器如何使用缓存来更快地加载页面，哪些因素决定了缓存周期，以及在必要时如何避免缓存.

为什么缓存如此重要？

所有浏览器都将尝试缓存静态资源的本地副本，以减少页面加载时间并最大程度地减少网络传输

无论服务是在同一网络环境中还是在世界其他网络环境中，从本地缓存中获取资源绝对比通过网络请求更快

如何使浏览器缓存生效？

案例1: 用户之前没有访问过该站点

浏览器没有此网站的任何缓存文件，因此浏览器将请求网站服务中的所有必要资源

以下是从第一次访问Wikipedia主页下载资源后的屏幕截图，底部状态栏显示265kb的数据已传输到浏览器

案例2: 用户之前访问过该网站

浏览器将请求站点服务器获取html页面，然后检查是否存在相应的静态资源缓存（js，css，图像）

当再次刷新Wikipedia页面时，由于缓存，我们可以看到与上一个请求的区别.

这时，数据传输量已降至928bytes，相当于首页访问页的0.3％. “大小”列显示我们的大部分资源都来自缓存

Chrome将从内存缓存和磁盘缓存中提取内容，因为在case1和case2中，我们尚未关闭浏览器，因此数据仍将存储在内存缓存中

显示浏览器缓存

在chrome中，我们可以在地址栏中输入chrome: // cache来查看缓存的内容. 对于每个缓存的文件，将在此处显示一个页面链接，该页面链接的内容包含该视图的更详细描述.

浏览器如何知道要缓存什么

浏览器首先检查服务器生成的http响应标头信息. 通常，有4个与缓存有关的标头信息:

ETag

ETag（实体标签）是用于缓存验证令牌的字符串，通常由文件的哈希值表示

服务器可以将ETag添加到其响应中，浏览器会收到此响应，然后在以后的请求中（文件过期后），浏览器可以使用此字段来确定缓存副本中是否存在过期副本.

如果通过比较哈希值相同，则资源没有更改，服务器将返回304状态码（未修改），浏览器将知道当前缓存的副本是安全的

注意: 仅当缓存中的文件过期时，才会在请求中使用ETag.

缓存控制

Cache-Control标头包含许多指令. 通过这些指令，我们可以设置缓存的行为，到期时间，验证等，也可以将它们组合在一起设置.

缓存行为

Cache-Control: public

公共意味着可以任意缓存资源（浏览器，CDN等）

Cache-Control: private

私有意味着资源只能由浏览器缓存

Cache-Control: no-store

无存储意味着让浏览器始终请求服务器获取资源

Cache-Control: no-cache

no-cache有点误导，并不意味着“不缓存”

这是告诉浏览器缓存该文件，但是只有在与服务器确认最新版本后才能使用它. 该验证过程是通过ETag完成的

此行为通常在html文件中使用，因为浏览器将始终检查最新的html文件标识符，因此这很有意义

到期

Cache-Control: max-age=60

此伪指令指定应将资源缓存多少秒，因此max-age = 60表示应将资源缓存一分钟. RFC 2616建议此处的最大值不应超过一年（max-age = 31536000）

Cache-Control: s-max-age=60

此指令仅用于中间缓存（例如CDN）

验证

Cache-Control: must-revalidate

此指令告诉高速缓存在使用资源之前先验证其过​​期状态. 如果已过期，则不应使用

到期

Expires标头来自http1.0版本，但今天仍然保留在许多站点中

此标头字段指定一个日期，超过该日期资源无效

Expires: Wed, 25 Jul 2018 21:00:00 GMT

如果在Cache-Control中指定了max-age指令，则浏览器将忽略过期

最后修改

最后修改的标头也来自http1.0版本

Last-Modified: Mon, 12 Dec 2016 14:45:00 GMT

此字段包含上次修改资源的日期和时间

HTML元标记

在HTML5版本之前，这是使用元标记在html中指定缓存控制的有效方法

但是html5中不再建议这样做，为什么？因为只有浏览器才能识别此标签，而中间缓存（CDN）无法识别.

所以最好通过http标头发送缓存指令

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-309549-1.html