Etag

作者：Nic Raboy翻译：疯狂的技术宅原文：https://www.thepolyglotdevelo...未经允许严禁转载最近，我一直在玩Netlify，结果我对内容交付网络（CDN）常见的缓存策略越来越熟悉。有一种将 ETag标识符用于 Web 资源的策略。 简而言之，ETag 标识符是一个值，通常是一个散列，代表特定 Web 资源的版本。该资源与 ETag 值一起缓存在浏览器中，并且服务器会在确定特定的缓存资源是否已更改时使用该值。 我们将探索怎样通过简单的 cURL 请求用 ETag 标识符模拟浏览器发出的请求，而是。 首先，我们将请求资源： $ curl -I https://www.thepolyglotdeveloper.com/css/custom.min.cssHTTP/2 200 accept-ranges: bytescache-control: public, max-age=0, must-revalidatecontent-length: 7328content-type: text/css; charset=UTF-8date: Wed, 04 Sep 2019 00:41:04 GMTstrict-transport-security: max-age=31536000etag: "018b8b0ecb632aab770af328f043b119-ssl"age: 0server: Netlifyx-nf-request-id: 65a8e1aa-03a0-4b6c-9f46-51aba795ad83-921013在上述请求中，我仅从响应中请求了标头信息。对于本文，响应体回复的内容对我们而言并不重要。 注意 cache-control 和 etag 标头以及响应代码。 在 Netlify 下，cache-control 标头告诉浏览器缓存资源，但也不信任缓存。这样做是为了使客户端始终尝试获取最新资源。 etag 标头代表资源的版本，并随将来的请求一起发送。如果服务器回复说两次请求之间的 etag 没有改变，则响应将会带有 304 代码，从而将使用缓存的资源。 因此，让我们用 cURL 检查一下资源是否已进行了更改： $ curl -I -H 'If-None-Match: "018b8b0ecb632aab770af328f043b119-ssl"' https://www.thepolyglotdeveloper.com/css/custom.min.cssHTTP/2 304 date: Wed, 04 Sep 2019 00:53:24 GMTetag: "018b8b0ecb632aab770af328f043b119-ssl"cache-control: public, max-age=0, must-revalidateserver: Netlifyx-nf-request-id: eca29310-c9bf-4742-87e1-3412e8852381-2165939对相同资源的新请求，将包含 If-None-Match 标头，其值为前一个请求的 etag 哈希。 ...

HTTP缓存HTTP缓存（ ETag、Cache-Control）——谷歌开发者HTTP缓存有利于web性能优化Cache-Control例子假设我们首页有一个请求,请求js文件<script src="./main.js"></script>如何让CSS和JS请求速度加快?此时打开首页发现这个文件大小为279KB，使用时间为382ms如果再次刷新首页，那么这个文件还会被再次请求一次。那么如何重复利用之前获取的资源而不用反复请求呢？答案是HTTP缓存，这是性能优化的一个重要方面。接下来在响应里设置响应头Cache-Control: max-age=30刷新两次首页第二次的时间为0响应头中的Cache-Control: max-age=30表示客户端将这个缓存最多 保存30 秒，30秒后再次请求文件将会再次下载。即：设置这个响应头之后，浏览器请求时发现是相同的URL，浏览器直接从内存里返回已经缓存的main.js，没有向服务器发出请求问题为什么首页不设置Cache-Control呢？如果首页缓存，刷新首页的时候根本不会请求服务器，那么如果服务器更新了代码，浏览器将没有办法接收到新的版本。一般首页，HTML不要设置Cache-Control。js和css要设置久一点例如10年,即一直保留有缓存。那么js和css更新了怎么办？浏览器请求时发现是相同的URL才使用缓存，那么可以设置查询参数，例如第二个版本的js可以写<script src="./main.js?v=2"></script>,来保证URL的不同，重新获取新的js文件。这样即可以缓存很久，又可以随时更新例如知乎的网页里的请求：总结通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面。好在每个浏览器都自带了 HTTP 缓存实现功能。您只需要确保每个服务器响应都提供正确的 HTTP标头指令，以指示浏览器何时可以缓存响应以及可以缓存多久。ExpiresExpires 是以前用来控制缓存的http头，Cache-Control是新版的API。现在首选 Cache-Control。如果在Cache-Control响应头设置了 “max-age” 或者 “s-max-age” 指令，那么 Expires 头会被忽略。响应头设置方式：Expires: Wed, 21 Oct 2015 07:28:00 GMTExpires 响应头包含日期/时间， 即在此时候之后，响应过期。注意： 因为过期标准的时间用的是本地时间，所以不靠谱，所以要游侠使用Cache-Control代替Expires区别Cache-Control设置时间长度Expires 设置时间点详细：Expires - HTTP | MDNMD5MD5是消息摘要算法。用于确保信息传输完整一致。具体作用这样接受一个String 或 Buffer，返回一个固定的String如果接受的String改变，那么返回的String也会改变例如将1.txt中的其中一个1改为0，那么返回值如下可见返回至完全改变了这个特性可以用来判断两次信息传输是否完整一致ETag例子：例如我们请求一个js文件。设置一个ETag响应头设置的ETage响应头为这个JS文件的MD5值查看响应：那么：下一次请求这个JS的时候，浏览器会把上一次响应的那个ETage的值放到If-None-Match里面，如图：这样做的作用是：如果请求和响应的MD5一样，说明不需要重新下载这个js文件。这时我们修改代码：如果MD5一样，说明文件没改过，那么返回304304 Not Modified：HTTP 304 未改变说明无需再次传输请求的内容，也就是说可以使用缓存的内容。HTTP 304 没有响应体，因为不需要下载响应内容，直接用缓存就行了ETag与 Cache-Control的区别假设我们请求两个文件，CSS文件使用Cache-Control缓存，js文件使用ETag。代码如下：两个请求区别：所以：由于CSS的请求是用缓存（Cache-Control）的，所以直接不发请求而js用的ETag，有请求也有响应，只不过如果MD5一样，那么就不下载响应体我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/dev…