大綱

底下網羅關於 HTTP Caching, HTTP Conditional Request 的 Headers，會在接下來的段落陸續介紹到

ETag

• 全名是 Entity Tag
• 語法

ETag: W/"0-2jmj7l5rSw0yVb/vlWAYkK/YBwk" # Weak
ETag: "0-2jmj7l5rSw0yVb/vlWAYkK/YBwk" # Strong

Weak ETag

• 通常是把 file metadata 拿去 hash，方法沒有規定
• 同樣的 Weak ETag，不能確保 file content 完全一致
• 但用在 cache 優化很有效

看看 NodeJS etag 的實作，就是拿 lastModified 跟 檔案大小 去做 hash

function stattag(stat) {
  var mtime = stat.mtime.getTime().toString(16);
  var size = stat.size.toString(16);

  return '"' + size + "-" + mtime + '"';
}

Strong ETag

• 通常是把 file content 拿去 hash，方法沒有規定
• 同樣的 Strong ETag，可以確保 file content 完全一致
• Strong ETag 的生成，效能比 Weak ETag 更差

看看 NodeJS etag 的實作，實作上也是非常樸實無華

function entitytag(entity) {
  if (entity.length === 0) {
    // fast-path empty
    return '"0-2jmj7l5rSw0yVb/vlWAYkK/YBwk"';
  }

  // compute hash of entity
  var hash = crypto
    .createHash("sha1")
    .update(entity, "utf8")
    .digest("base64")
    .substring(0, 27);

  // compute length of entity
  var len =
    typeof entity === "string"
      ? Buffer.byteLength(entity, "utf8")
      : entity.length;

  return '"' + len.toString(16) + "-" + hash + '"';
}

Cache-Control

• 用來控制 cache 的各種行為
• cache 存放位置（public, private）
• 是否允許 cache（no-cache, no-store）
• cache 有效期控制（max-age, s-maxage）
• cache 過期後的行為 （must-revalidate, proxy-revalidate, stale-while-revalidate）
• cache 可否被轉換（no-transform）
• cache 優化策略（only-if-cached, immutable）
• 其他很少用到的（must-understand）

Directives

小插曲，觀察 Chrome Disable Cache 的行為

隨便打開一個網頁，F12 > Network > Disable Cache 打勾，實際發送的是 Cache-Control: no-cache

取消勾選，再重整網頁，實際發送的是 Cache-Control: max-age=0

Conditional Requests

• If-* 開頭的 Request Headers
• If-* 條件為 true，則執行對應的 HTTP Method 操作
• If-Range + Range 用來發起 Conditional Range Request，true 回傳對應的 Range，false 回傳整個 resource
• If-None-Match + If-Modified-Since 通常會一起使用，用來更新快取
• If-Match + If-Unmodified-Since 通常會一起使用，用來更新資源，若 If-* 條件為 false，則回傳 412 Precondition Failed

小結

HTTP Caching 跟 HTTP Conditional Requests 是兩個密不可分的概念。在第一個篇章，我們先有一個概觀，把這個主題會用到的 Headers 都介紹過一輪，接下來我們就會進到實作的環節～

參考資料

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Conditional_requests
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Caching
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Expires
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Last-Modified
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/ETag
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Vary
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Pragma
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Age
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/If-Range
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/If-Match
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/If-Modified-Since
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/If-None-Match
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/If-Unmodified-Since
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/304
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/412
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/428
• https://www.rfc-editor.org/rfc/rfc9111.html
• https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_cache_key
• https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_cache_path
• https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_cache