1.1 ETag 是什么ETag(Entity Tag)是万维网协议 HTTP 的一部分。它是 HTTP 协议提供的若干机制中的一种 Web 缓存验证机制,并且允许客户端进行缓存协商。这使得缓存变得更加高效,而且节省带宽。如果资源的内容没有发生改变,Web 服务器就不需要发送一个完整的响应。 1.2 ETag 的作用ETag 是一个不透明的标识符,由 Web 服务器根据 URL 上的资源的特定版本而指定。如果 URL 上的资源内容改变,一个新的不一样的 ETag 就会被生成。ETag 可以看成是资源的指纹,它们能够被快速地比较,以确定两个版本的资源是否相同。 需要注意的是 ETag 的比较只对同一个 URL 有意义 —— 不同 URL 上资源的 ETag 值可能相同也可能不同。 1.3 ETag 的语法1 2 | ETag: W/ "<etag_value>"
ETag: "<etag_value>"
|
W/(可选) :'W/'(大小写敏感) 表示使用弱验证器。弱验证器很容易生成,但不利于比较。强验证器是比较的理想选择,但很难有效地生成。相同资源的两个弱 Etag 值可能语义等同,但不是每个字节都相同。
"<etag_value>" :实体标签唯一地表示所请求的资源。它们是位于双引号之间的 ASCII 字符串(如 “2c-1799c10ab70” )。没有明确指定生成 ETag 值的方法。通常是使用内容的散列、最后修改时间戳的哈希值或简单地使用版本号。比如,MDN 使用 wiki 内容的十六进制数字的哈希值。
1.4 ETag 的使用在大多数场景下,当一个 URL 被请求,Web 服务器会返回资源和其相应的 ETag 值,它会被放置在 HTTP 响应头的 ETag 字段中: 1 2 3 4 5 | HTTP /1 .1 200 OK
Content-Length: 44
Cache-Control: max-age=10
Content-Type: application /javascript ; charset=utf-8
ETag: W/ "2c-1799c10ab70"
|
然后,客户端可以决定是否缓存这个资源和它的 ETag。以后,如果客户端想再次请求相同的 URL,将会发送一个包含已保存的 ETag 和 If-None-Match 字段的请求。 1 2 3 4 | GET /index .js HTTP /1 .1
Host: localhost:3000
Connection: keep-alive
If-None-Match: W/ "2c-1799c10ab70"
|
客户端请求之后,服务器可能会比较客户端的 ETag 和当前版本资源的 ETag。如果 ETag 值匹配,这就意味着资源没有改变,服务器便会发送回一个极短的响应,包含 HTTP “304 未修改” 的状态。304 状态码告诉客户端,它的缓存版本是最新的,可以直接使用它。 1 2 3 4 | HTTP /1 .1 304 Not Modified
Cache-Control: max-age=10
ETag: W/ "2c-1799c10ab70"
Connection: keep-alive
|
二、ETag 实战2.1 创建 Koa 服务器了解完 ETag 相关知识后,基于 koa 、koa-conditional-get 、koa-etag 和 koa-static 这些库来介绍一下,在实际项目中如何利用 ETag 响应头和 If-None-Match 请求头实现资源的缓存控制。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // server.js
const Koa = require( "koa" );
const path = require( "path" );
const serve = require( "koa-static" );
const etag = require( "koa-etag" );
const conditional = require( "koa-conditional-get" );
const app = new Koa();
app.use(conditional()); // 使用条件请求中间件
app.use(etag()); // 使用etag中间件
app.use( // 使用静态资源中间件
serve(path.join(__dirname, "/public" ), {
maxage: 10 * 1000, // 设置缓存存储的最大周期,单位为秒
})
);
app.listen(3000, () => {
console.log( "app starting at port 3000" );
});
|
在以上代码中,使用了 koa-static 中间件来处理静态资源,这些资源被保存在 public 目录下。在该目录下,创建了 index.html 和 index.js 两个资源文件,文件中的内容分别如下所示: 2.1.1 public/index.html1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html>
< html lang = "zh-cn" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >ETag 使用示例</ title >
< script src = "/index.js" ></ script >
</ head >
< body >
< h3 >ETag 使用示例</ h3 >
</ body >
</ html >
|
2.1.2 public/index.js在启动完服务器之后,打开 Chrome 开发者工具并切换到 Network 标签栏,然后在浏览器地址栏输入 http://localhost:3000/ 地址,接着多次访问该地址(地址栏多次回车)。下图是多次访问的结果: 2.2 ETag 和 If-None-Match下面以 index.js 为例,来分析上图中与之对应的 HTTP 报文。对于 index.html 文件,感兴趣的小伙伴可以自行分析一下。接下来先来分析首次请求 index.js 文件的报文: 2.2.1 首次请求 — 请求报文1 2 3 4 5 6 | GET /index .js HTTP /1 .1
Host: localhost:3000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
...
|
2.2.2 首次请求 — 响应报文1 2 3 4 5 | HTTP /1 .1 200 OK
Content-Length: 44
Cache-Control: max-age=10
ETag: W/ "2c-1799c10ab70"
...
|
在使用了 koa-static 和 koa-etag 中间件之后,index.js 文件首次请求的响应报文中会包含 Cache-Control 和 ETag 的字段信息。
Cache-Control 描述的是一个相对时间,在进行缓存命中的时候,都是利用客户端时间进行判断,所以相比较 Expires ,Cache-Control 的缓存管理更有效,安全一些。 2.2.3 10s内 — 请求报文1 2 3 4 5 6 | GET /index .js HTTP /1 .1
Host: localhost:3000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
...
|
2.2.4 10s内 — 响应信息(General)1 2 3 4 5 | Request URL: http: //localhost :3000 /index .js
Request Method: GET
Status Code: 200 OK (from memory cache)
Remote Address: [::1]:3000
Referrer Policy: strict-origin-when-cross-origin
|
2.2.5 10s内 — 响应信息(Response Headers)1 2 3 4 | Cache-Control: max-age=10
Connection: keep-alive
Content-Length: 44
ETag: W/ "2c-1799c10ab70"
|
由于设置了 index.js 资源文件的最大缓存时间为 10s,所以在 10s 内浏览器会直接从缓存中读取文件的内容。需要注意的是,此时的状态码为:Status Code: 200 OK (from memory cache) 。
|