用 cURL 请求测试 ETag 浏览器缓存

时间 2019-12-20

原文原文链接

做者：Nic Raboy
翻译：疯狂的技术宅
原文： https://www.thepolyglotdevelo...
未经容许严禁转载

最近，我一直在玩Netlify，结果我对内容交付网络（CDN）常见的缓存策略愈来愈熟悉。有一种将 ETag标识符用于 Web 资源的策略。css

简而言之，ETag 标识符是一个值，一般是一个散列，表明特定 Web 资源的版本。该资源与 ETag 值一块儿缓存在浏览器中，而且服务器会在肯定特定的缓存资源是否已更改时使用该值。前端

咱们将探索怎样经过简单的 cURL 请求用 ETag 标识符模拟浏览器发出的请求，而是。程序员

首先，咱们将请求资源：面试

$ curl -I https://www.thepolyglotdeveloper.com/css/custom.min.css

HTTP/2 200 
accept-ranges: bytes
cache-control: public, max-age=0, must-revalidate
content-length: 7328
content-type: text/css; charset=UTF-8
date: Wed, 04 Sep 2019 00:41:04 GMT
strict-transport-security: max-age=31536000
etag: "018b8b0ecb632aab770af328f043b119-ssl"
age: 0
server: Netlify
x-nf-request-id: 65a8e1aa-03a0-4b6c-9f46-51aba795ad83-921013

在上述请求中，我仅从响应中请求了标头信息。对于本文，响应体回复的内容对咱们而言并不重要。segmentfault

注意 cache-control 和 etag 标头以及响应代码。浏览器

在 Netlify 下，cache-control 标头告诉浏览器缓存资源，但也不信任缓存。这样作是为了使客户端始终尝试获取最新资源。 etag 标头表明资源的版本，并随未来的请求一块儿发送。若是服务器回复说两次请求之间的 etag 没有改变，则响应将会带有 304 代码，从而将使用缓存的资源。缓存

所以，让咱们用 cURL 检查一下资源是否已进行了更改：bash

$ curl -I -H 'If-None-Match: "018b8b0ecb632aab770af328f043b119-ssl"' https://www.thepolyglotdeveloper.com/css/custom.min.css

HTTP/2 304 
date: Wed, 04 Sep 2019 00:53:24 GMT
etag: "018b8b0ecb632aab770af328f043b119-ssl"
cache-control: public, max-age=0, must-revalidate
server: Netlify
x-nf-request-id: eca29310-c9bf-4742-87e1-3412e8852381-2165939

对相同资源的新请求，将包含 If-None-Match 标头，其值为前一个请求的 etag 哈希。服务器

注意，此次响应状态代码为预期的 304。若是 etag 不一样，则使用新的 etag 哈希产生 200 响应。微信

与压缩的缓存资源进行交互

若是查看浏览器的网络检查器，您可能会注意到资源的 etag 哈希值附加了 -df 值。例如对于相同的资源，个人浏览器显示如下内容：

018b8b0ecb632aab770af328f043b119-ssl-df

虽然类似，但与以前的 cURL 请求返回的 etag 哈希值并不彻底相同。尝试使用上述 etag 值运行一个 cURL 请求：

$ curl -I -H 'If-None-Match: "018b8b0ecb632aab770af328f043b119-ssl-df"' https://www.thepolyglotdeveloper.com/css/custom.min.css

HTTP/2 200 
accept-ranges: bytes
cache-control: public, max-age=0, must-revalidate
content-length: 7328
content-type: text/css; charset=UTF-8
date: Wed, 04 Sep 2019 01:03:13 GMT
strict-transport-security: max-age=31536000
etag: "018b8b0ecb632aab770af328f043b119-ssl"
age: 0
server: Netlify
x-nf-request-id: 2734ffab-c611-4fc9-841e-460f172aa3b4-1604468

响应不是 304 代码，由于 -df 表示它是 URL 的压缩版本。就目前而言，咱们的 cURL 请求针对的是 URL 的未压缩版本。

Netlify 的支持工程师在这个论坛帖子中向我指出了这种差别。

在大多数状况下，Web 浏览器将包含适当的标头信息以使用压缩资源，所以在 cURL中，咱们必须作一些不一样的事。

为了使 cURL 超越此限制，如下请求将起做用：

$ curl --compressed -I -H 'If-None-Match: "018b8b0ecb632aab770af328f043b119-ssl-df"' https://www.thepolyglotdeveloper.com/css/custom.min.css

HTTP/2 304 
date: Wed, 04 Sep 2019 01:07:36 GMT
etag: "018b8b0ecb632aab770af328f043b119-ssl-df"
cache-control: public, max-age=0, must-revalidate
server: Netlify
vary: Accept-Encoding
x-nf-request-id: 65a8e1aa-03a0-4b6c-9f46-51aba795ad83-1301670

请注意，在上述请求中，咱们在 cURL 中用了 --compressed 标志。结果收到了 304 响应，指示资源没有更改，咱们应该使用本地缓存的副本。

或者，咱们能够执行如下cURL请求：

$ curl -I -H 'If-None-Match: "018b8b0ecb632aab770af328f043b119-ssl-df"' -H 'Accept-Encoding: gzip, deflate, br' https://www.thepolyglotdeveloper.com/css/custom.min.css

HTTP/2 304 
date: Wed, 04 Sep 2019 01:12:34 GMT
etag: "018b8b0ecb632aab770af328f043b119-ssl-df"
cache-control: public, max-age=0, must-revalidate
server: Netlify
vary: Accept-Encoding
x-nf-request-id: eca29310-c9bf-4742-87e1-3412e8852381-2432816

而不是用 --compressed 标志，咱们包含了 accept-encoding 标头。

一样，Netlify 的 Luke Lawson 在这个论坛帖子中提供了有关压缩版本的信息。

结论

您刚刚看到了如何用 cURL 模拟在 Web 浏览器中的相同缓存。因为我是使用内容交付网络（CDN）处理缓存的新手，所以对于测试缓存如何与任何给定资源的 etag 哈希一块儿工做对我来讲很是有用。 304 响应将始终比 200 响应更快地收到，而且有效负载更小，从而节省了带宽和性能，同时又不牺牲内容的新鲜度。

从理论上讲，CDN 会维护给定资源的版本信息，所以将可以验证 etag 值的新鲜度。由浏览器决定 etag 是否陈旧。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...