2. 程式人生 > 其它 >http快取中etag的生成原理

http快取中etag的生成原理

阿新 • • 發佈：2021-08-30

文章原文:https://www.cnblogs.com/yalong/p/15207547.html

說到http快取中的etag應該都知道， 但是etag具體是怎麼生成的，不太清楚，所以特意研究了下

原始碼是看的 koa-etag 這個npm包

先上總結, koa2中etag生成原理：

  • 對於靜態檔案，比如html, css,js, png等這些，etag 生成的方式就是檔案的 size 加 mtime
  • 對於字串 或者 Buffer型別的，etag 生成的方式就是 字串、Buffer 的長度 加上 對應的hash值

koa-etag使用方式

const conditional = require('koa-conditional-get');
const etag = require('koa-etag');
const Koa = require('koa');
const app = new Koa();
 
// etag works together with conditional-get
app.use(conditional());
app.use(etag());
 
app.use(function (ctx) {
  ctx.body = 'Hello World';
});
 
app.listen(3000);
 
console.log('listening on port 3000');

koa-etag的原始碼以及註釋如下：

'use strict'

/**
 * Module dependencies.
 */

const calculate = require('etag')
const Stream = require('stream')

// 用於將老式的 Error first callback 轉換為 Promise 物件
const promisify = require('util').promisify
const fs = require('fs')

const stat = promisify(fs.stat)

/**
 * Expose `etag`.
 *
 * Add ETag header field.
 * @param {object} [options] see https://github.com/jshttp/etag#options
 * @param {boolean} [options.weak]
 * @return {Function}
 * @api public
 */

module.exports = function etag (options) {
  // 返回的就是個中介軟體函式
  return async function etag (ctx, next) {
    await next()
    // 獲取響應體
    const entity = await getResponseEntity(ctx)
    setEtag(ctx, entity, options)
  }
}

async function getResponseEntity (ctx) {
  const body = ctx.body
  // !body -- 沒有 body 就不用設定 etag 了; 
  // ctx.response.get('etag') -- 如果已經設定過etag了也不用再設定etag了
  if (!body || ctx.response.get('etag')) return

  // 看下status是數字幾開頭的， 比如2xx, 4xx, 3xx
  const status = ctx.status / 100 | 0

  // 如果不是2xx的 就相當於請求失敗，也不用設定了
  if (status !== 2) return

  if (body instanceof Stream) { // 看body是不是流物件(Stream), 是的話, 根據對應的 path, 呼叫fs.stat 返回對應的stats
    if (!body.path) return
    return await stat(body.path)
  } else if ((typeof body === 'string') || Buffer.isBuffer(body)) { // 看body是不是 string 或 Buffer
    return body
  } else { // 一般是物件
    return JSON.stringify(body)
  }
}

function setEtag (ctx, entity, options) {
  if (!entity) return // entity 沒有的話 就不用設定etag了, 對應 getResponseEntity 方法裡面的直接 return
  // 呼叫 etag 模組，計算並生成 etag
  ctx.response.etag = calculate(entity, options)
}

核心就是 先呼叫 getResponseEntity 獲取響應實體
然後呼叫 etag 計算生成 etag
注意， ctx.body 有如下型別

string written
Buffer written
Stream piped
Object || Array json-stringified
null no content response

然後body大致可以分為三種

  1. body instanceof Stream // stream 型別，平常的css、js、html、png等 這些靜態資源 都是stream型別的
  2. typeof body === 'string' || Buffer.isBuffer(body) // 字串型別和Buffer型別， 比如檔案下載，一般就是返回二進位制的Buffer
  3. 其他型別

etag的原始碼以及註釋如下：

/*!
 * etag
 * Copyright(c) 2014-2016 Douglas Christopher Wilson
 * MIT Licensed
 */

'use strict'

/**
 * Module exports.
 * @public
 */

module.exports = etag

/**
 * Module dependencies.
 * @private
 */

var crypto = require('crypto')
var Stats = require('fs').Stats

/**
 * Module variables.
 * @private
 */

var toString = Object.prototype.toString

/**
 * Generate an entity tag.
 *
 * @param {Buffer|string} entity
 * @return {string}
 * @private
 */

// Buffer、String 型別生成 etag 依賴於 crypto 生成 hash
// hash 的生成主要依賴於sha1的加密方式
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 + '"'
}

/**
 * Create a simple ETag.
 *
 * @param {string|Buffer|Stats} entity
 * @param {object} [options]
 * @param {boolean} [options.weak]
 * @return {String}
 * @public
 */

function etag (entity, options) {
  if (entity == null) {
    throw new TypeError('argument entity is required')
  }

  // support fs.Stats object
  var isStats = isstats(entity)
  var weak = options && typeof options.weak === 'boolean'
    ? options.weak
    : isStats

  // validate argument
  if (!isStats && typeof entity !== 'string' && !Buffer.isBuffer(entity)) {
    throw new TypeError('argument entity must be string, Buffer, or fs.Stats')
  }

  // generate entity tag
  var tag = isStats
    ? stattag(entity)
    : entitytag(entity)

  // 弱etag 比 強etag 多了個 W
  return weak
    ? 'W/' + tag
    : tag
}

/**
 * Determine if object is a Stats object.
 *
 * @param {object} obj
 * @return {boolean}
 * @api private
 */

// 判斷obj 是不是 Stats 的例項 
// 或者 如果 obj 裡面有 ctime  mtime ino size 這幾個欄位 並且資料型別也對的上 也行
function isstats (obj) {
  // genuine fs.Stats
  if (typeof Stats === 'function' && obj instanceof Stats) {
    return true
  }

  // quack quack
  return obj && typeof obj === 'object' &&
    'ctime' in obj && toString.call(obj.ctime) === '[object Date]' &&
    'mtime' in obj && toString.call(obj.mtime) === '[object Date]' &&
    'ino' in obj && typeof obj.ino === 'number' &&
    'size' in obj && typeof obj.size === 'number'
}

/**
 * Generate a tag for a stat.
 *
 * @param {object} stat
 * @return {string}
 * @private
 */

// 生成 stats 型別的 etag
function stattag (stat) {
  var mtime = stat.mtime.getTime().toString(16)
  var size = stat.size.toString(16)

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

核心就這倆函式

// generate entity tag
var tag = isStats
    ? stattag(entity)
    : entitytag(entity)

生成etag的原理：

  • stattag() 對應靜態檔案，etag 生成的方式就是檔案的 size 加 mtime
  • entitytag() 對應 字串 或者 Buffer，etag 生成的方式就是 字串 或者 Buffer 的長度 加上 通過 sha1 演算法生成的hash串的前27位

關於強、弱Etag

這倆的生成方式如下

  // 弱etag 比 強etag 多了個 W
  return weak
    ? 'W/' + tag
    : tag

在上述Etag方法裡 其實弱Etag 就是比強Etag多了個 字母 W， 生成的原理都是一樣的

使用的時候強校驗的ETag匹配要求兩個資源內容的每個位元組需完全相同，包括所有其他實體欄位（如Content-Language）不發生變化。強ETag允許重新裝配和快取部分響應，以及位元組範圍請求。 弱校驗的ETag匹配要求兩個資源在語義上相等，這意味著在實際情況下它們可以互換，而且快取副本也可以使用。不過這些資源不需要每個位元組相同，因此弱ETag不適合位元組範圍請求。
當Web伺服器無法生成強ETag的時候，比如動態生成的內容，弱ETag就可能發揮作用了。

檔案系統中 mtime 和 ctime 指什麼，都有什麼不同

在 linux 中，

  • mtime：modified time 指檔案內容改變的時間戳
  • ctime：change time 指檔案屬性改變的時間戳，屬性包括 mtime。而在windows 上，它表示的是 creation time

http 服務中靜態檔案的 Last-Modified 就是根據 mtime 什麼生成

Apache伺服器生成etag的方式

Apache預設通過 FileEtag中 INode Mtime Size 的配置自動生成ETag(當然也可以通過使用者自定義的方式)

  • INode: 檔案的索引節點(inode)數
  • MTime: 檔案的最後修改日期及時間
  • Size: 檔案的位元組數

面試題

1.為什麼大公司不太願意用etag?

因為大公司好多是使用web叢集或者說負載均衡，
在web伺服器只有一臺的情況，請求內容的唯一性可以由Etag來確定，但是如果是多臺web伺服器在負載均衡裝置下提供對外服務，儘管各web伺服器上的元件內容完全一致，但是由於在不同的伺服器上Inode是不同的，因此對應生成的Etag也是不一樣的。

在這種情況下，儘管請求的是同一個未發生變化的元件，但是由於Etag的不同，導致Apache伺服器不再返回304 Not Modified，而是返回了200 OK和實際的元件內容（儘管事實上內容不曾發生變化），大大浪費了頻寬。

所以有人建議使用WEB叢集時不要使用ETag

這個問題其實很好解決,因為多伺服器時,INode不一樣,所以不同的伺服器生成的ETag不一樣,所以使用者有可能重複下載(這時ETag就會不準),
明白了上面的原理和設定後,解決方法也很容易,讓ETag只用後面二個引數,MTime和Size就好了.只要ETag的計算沒有INode參於計算,就會很準了.
或者自定義Etag 的生成規則，只要避開那些因機器不同而導致差異的欄位就可以了

Koa2裡面的etag由於不涉及到Inode 以及其他受機器影響的欄位，所以在叢集模式下是可用的

2.koa2中協商快取是如何生效的？

在上面使用koa-etag的時候,用到了 koa-conditional-get, 而 koa-conditional-get 的原始碼如下：

module.exports = function conditional () {
  return async function (ctx, next) {
    await next()

    if (ctx.fresh) {
      ctx.status = 304
      ctx.body = null
    }
  }
}

其實就用哪個呼叫了ctx.fresh 進行新鮮度檢測
可以看到Koa在request中的fresh方法如下：

狀態碼200-300之間以及304呼叫fresh方法，判斷該請求的資源是否新鮮。

fresh方法原始碼解讀:

只保留核心程式碼，可以自行去看fresh的原始碼。

var CACHE_CONTROL_NO_CACHE_REGEXP = /(?:^|,)\s*?no-cache\s*?(?:,|$)/

function fresh (reqHeaders, resHeaders) {
   // 1. 如果這2個欄位，一個都沒有，不需要校驗
  var modifiedSince = reqHeaders['if-modified-since']
  var noneMatch = reqHeaders['if-none-match']
  if (!modifiedSince && !noneMatch) {
    console.log('not fresh')
    return false
  }

  // 2. 給端對端測試用的，因為瀏覽器的Cache-Control: no-cache請求
  //    是不會帶if條件的 不會走到這個邏輯
  var cacheControl = reqHeaders['cache-control']
  if (cacheControl && CACHE_CONTROL_NO_CACHE_REGEXP.test(cacheControl)) {
    return false
  }

  // 3. 比較 etag和if-none-match
  if (noneMatch && noneMatch !== '*') {
    var etag = resHeaders['etag']

    if (!etag) {
      return false
    }
    // 部分程式碼
    if (match === etag) {
        return true;
    }
  }
  
  // 4. 比較if-modified-since和last-modified
  if (modifiedSince) {
    var lastModified = resHeaders['last-modified']
    var modifiedStale = !lastModified || !(parseHttpDate(lastModified) <= parseHttpDate(modifiedSince))
    if (modifiedStale) {
      return false
    }
  }
  
  return true
}

fresh的程式碼判斷邏輯總結如下，滿足3種條件之一，fresh為true。

3.關於koe-etag的使用方法

看下面的程式碼，為啥要先 app.use(conditional()); 再 app.use(etag()); ?

const conditional = require('koa-conditional-get');
const etag = require('koa-etag');
const Koa = require('koa');
const app = new Koa();

// etag works together with conditional-get
app.use(conditional());
app.use(etag());

答：
其實這個koa2的洋蔥模型原理，看下圖：


因為最後一步才進行新鮮度檢測， 所以 app.use(conditional()); 要放在最前面
更多關於洋蔥模型可以參考： https://www.jianshu.com/p/4cf2d9792165

瀏覽器快取整體流程

1.發出請求後，會先在本地查詢快取。
2.沒有快取去服務端請求最新的資源，返回給客戶端（200），並重新進行快取。
3.查到有快取，要判斷快取本地是否過期(max-age等)。
4.沒有過期，直接返回給客戶端（200 from cache）。
5.如果快取過期了，看是否有配置協商快取（etag/last-modified），去服務端再驗證該資源是否更新，本地快取是否可以繼續使用。
6.如果發現資源可用，返回304，告知客戶端可以繼續使用快取，並根據max-age等更新快取時間，不需要返回資料，從而減少整體請求時間。
7.如果服務端再驗證失敗，請求最新的資源，返回給客戶端（200），並重新進行快取。

參考連結：
https://juejin.cn/post/6844904133024022536#heading-19
https://www.sohu.com/a/328853216_463987
https://www.jianshu.com/p/4cf2d9792165

相關推薦

http快取中etag的生成原理

文章原文:https://www.cnblogs.com/yalong/p/15207547.html 說到http快取中的etag應該都知道， 但是etag具體是怎麼生成的，不太清楚，所以特意研究了下

使用 HTTP 快取：Etag, Last-Modified 與 Cache-Control

整個 Web 系統架構在HTTP 協議之上， 利用 HTTP 的快取機制不僅可以極大地減少伺服器負載， 更重要的是加速頁面的載入，以及減少使用者的流量消耗。 快速到達和易於訪問是 Web 與生俱來的特性， 其快取機制也早已被伺

ASP.NET Core中的Http快取使用

Http響應快取可減少客戶端或代理對web伺服器發出的請求數。響應快取還減少了web伺服器生成響應所需的工作量。響應快取由Http請求中的header控制。

HTTP快取（Cache-Control、Expires 、ETag）

HTTP快取 HTTP快取（ ETag、Cache-Control）——谷歌開發者HTTP快取有利於web效能優化

http訪問中GET和POST的原理解析

HTTP中的GET和POST請求解析 1.HTTP有幾種請求方法： 　　在HTTP1.1中總共定義了8種方法：

WKWebView預設快取策略與HTTP快取協議

今天同事反應H5更新了資源，但iOS App裡面仍然使用的是舊的快取資源。為什麼會這樣呢？要弄清楚這個問題，首先得弄清楚WKWebView的快取原理。

Python中順序表原理與實現方法詳解

本文例項講述了Python中順序表原理與實現方法。分享給大家供大家參考，具體如下：

python中棧的原理及實現方法示例

本文例項講述了python中棧的原理及實現方法。分享給大家供大家參考，具體如下：

執行緒安全及Python中的GIL原理分析

本文講述了執行緒安全及Python中的GIL。分享給大家供大家參考，具體如下： 摘要

JavaScript中的this原理及6種常見使用場景詳解

一、this原理 this是JavaScript的一個關鍵字，函式呼叫時才會出現； 因為函式是在一定的環境中執行的，呼叫函式時肯定需要知道是[誰呼叫的]？就用到了this進行指向；

vue-cli建立的專案中的gitHooks原理解析

前言 在使用 vue create my-app 建立專案的時候，Vue 會自動幫我們做好一些預配置，你可以不使用它，但是一旦需要的時候，突然發現，咦~原來它已經幫我做好準備工作了，只需要按自己的需求配置一下就可以了，就會覺得

vue學習筆記之Vue中css動畫原理簡單示例

本文例項講述了Vue中css動畫原理。分享給大家供大家參考，具體如下： 當transition包裹了一個元素之後，vue會自動分析元素的css樣式，構建動畫流程。

Eclipse中JSP生成的class檔案去了哪裡？

JSP在請求的時候，會先轉化成Servlet（其實就是個java類），然後生成class檔案，再提供服務。 那麼生成的java、class檔案在哪呢？

對Vue中的MVVM原理解析和實現

對Vue中的MVVM原理解析和實現 首先你對Vue需要有一定的瞭解，知道MVVM。這樣才能更有助於你順利的完成下面原理的閱讀學習和編寫

詳解Vue中的MVVM原理和實現方法

下面由我阿巴阿巴的詳細走一遍Vue中MVVM原理的實現，這篇文章大家可以學習到：

Http協議中GET和POST的區別

宣告:本文參考自:https://www.zhihu.com/question/28586791 HTTP最早被用來做瀏覽器與伺服器之間互動HTML和表單的通訊協議；後來又被被廣泛的擴充到介面格式的定義上。所以在討論GET和POST區別的時候，需要現確定下到

http 協議中post請求資料格式

這篇文章也有詳細說過：https://www.cnblogs.com/QiKa/p/12863127.html HTTP 協議規定 POST 提交的資料必須放在訊息主體（entity-body）中

F5 清楚http 快取

Topic This article applies to BIG-IP 11.x and later. For information about other versions, refer to the following article:

Java中的鎖[原理、鎖優化、CAS、AQS]

參考地址: https://mp.weixin.qq.com/s/D44S7HtEZBSuDI1biAXbVw1、為什麼要用鎖？鎖-是為了解決併發操作引起的髒讀、資料不一致的問題。2、鎖實現的基本原理2.1、volatile★Java程式語言允許執行緒訪問共享變數， 為

vue中響應式原理

　　Vue是對MVVM框架的很好體現，那什麼是MVVM呢？顧名思義它其實就是Model-View-ViewModel模式。它是一個軟體架構設計模式，Model可以看成是代表資料模型，View代表檢視，它負責將資料模型轉化成ui進行展示。ViewMo