Koa.js 使用 ETag 和 Last-Modified 控制请求的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，优化网页性能是非常重要的一环。ETag 和 Last-Modified 是常用的 HTTP 缓存机制，通过它们我们可以使客户端缓存页面数据，减少网络请求次数，从而提高网页性能。

ETag 和 Last-Modified

ETag 和 Last-Modified 是 http header 的两个属性，可以帮助浏览器和服务器协调缓存文件的行为。

ETag（Entity Tag）：资源的唯一标识符，由服务器生成
Last-Modified: 资源最后更改时间戳

在浏览器第一次访问某个资源时，服务器会返回该资源的 ETag 和 Last-Modified 值。每次浏览器再次请求该资源时，会发送 If-None-Match（表示上次响应中得到的 ETag 值）和 If-Modified-Since（表示上次得到的 Last-Modified 时间戳）。如果缓存的资源未失效，服务器将返回 304 状态码，告诉浏览器使用缓存中的资源即可。

如何使用 ETag 和 Last-Modified

在 Koa.js 中，可以使用中间件 koa-conditional-get 来方便地完成 ETag 和 Last-Modified 的控制。安装如下：

npm install koa-conditional-get

引入中间件后，将其加入应用中间件栈即可，如下所示：

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

const app = new Koa();
app.use(conditional());

接下来，我们需要对要发送的响应头进行控制。在 Koa.js 中，可以使用 ctx.set() 方法来设置响应头：

ctx.set('Etag', '12345'); 
ctx.set('Last-Modified', 'Mon, 01 Jan 2000 00:00:00 GMT');

最后，如果响应成功，只需使用 ctx.status=200 进行状态码设置即可。如果缓存未失效，则返回 304，直接使用缓存数据。

一个完整的示例代码如下：

// javascriptcn.com 代码示例
const Koa = require('koa');
const conditional = require('koa-conditional-get');

const app = new Koa();
app.use(conditional());

app.use(async (ctx, next) => {
  const conditions = {
    'If-None-Match': ctx.req.headers['if-none-match'],
    'If-Modified-Since': ctx.req.headers['if-modified-since'],
  };

  // 判断是否需要重新生成资源
  const isFresh = false;

  if (isFresh) {
    ctx.status = 200;
    ctx.set('ETag', 'unique ETag value');
    ctx.set('Last-Modified', 'Wed, 09 Jun 2021 10:18:14 GMT');
    ctx.body = 'hello, world!';
  } else {
    ctx.status = 304;
  }
});

app.listen(3000);

总结

通过使用 ETag 和 Last-Modified ，我们可以更好地控制客户端缓存行为，减少网络请求次数，从而提高网页性能。在 Koa.js 中，我们可以使用中间件 koa-conditional-get 来方便地集成这两个功能，并使用 ctx.set() 方法来设置响应头。当然，在使用时还需要判断是否资源有变化，以便重新生成正确的响应头数据。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652a20917d4982a6ebc7c2d4