在前端开发中，优化网页性能是非常重要的一环。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 的控制。安装如下：
--- ------- -------------------
引入中间件后，将其加入应用中间件栈即可，如下所示：
----- --- - --------------- ----- ----------- - ------------------------------- ----- --- - --- ------ -----------------------
接下来，我们需要对要发送的响应头进行控制。在 Koa.js 中，可以使用 ctx.set() 方法来设置响应头：
--------------- --------- ------------------------ ----- -- --- ---- -------- ------
最后，如果响应成功，只需使用 ctx.status=200 进行状态码设置即可。如果缓存未失效，则返回 304，直接使用缓存数据。
一个完整的示例代码如下：
----- --- - ---------------
----- ----------- - -------------------------------
----- --- - --- ------
-----------------------
------------- ----- ----- -- -
----- ---------- - -
---------------- ---------------------------------
-------------------- -------------------------------------
--
-- ------------
----- ------- - ------
-- --------- -
---------- - ----
--------------- ------- ---- --------
------------------------ ----- -- --- ---- -------- ------
-------- - ------- --------
- ---- -
---------- - ----
-
---
-----------------总结
通过使用 ETag 和 Last-Modified ，我们可以更好地控制客户端缓存行为，减少网络请求次数，从而提高网页性能。在 Koa.js 中，我们可以使用中间件 koa-conditional-get 来方便地集成这两个功能，并使用 ctx.set() 方法来设置响应头。当然，在使用时还需要判断是否资源有变化，以便重新生成正确的响应头数据。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652a20917d4982a6ebc7c2d4