什么是 koa-server-timing
koa-server-timing 是一个 Node.js 中的中间件，它能够用于记录请求的响应时间，并且将这些时间信息发送到前端。
由于每个请求都包含多个阶段（如 DNS 查询、TCP 连接、TTFB（Time To First Byte）、DOMContentLoaded、Load 等），我们可以通过 koa-server-timing 将每个阶段的耗时分别记录下来，并且在响应头中添加相应的信息。
通过这些信息，我们可以更好地了解从客户端发出请求到最终呈现页面所经过的所有阶段的时间和资源使用情况，以便从性能优化的角度对我们的应用程序进行调优。
koa-server-timing 的优势
在前端开发中，我们经常会使用浏览器自带的性能分析工具（如 Chrome DevTools 中的 Performance），通过这些工具能够查看请求的中各个阶段所耗费的时间。
但是，浏览器自带的性能分析工具存在一些缺点：
- 只能查看单个页面的性能；
- 不能记录服务器端的请求处理时间；
- 不能将不同阶段的耗时信息发送到前端；
koa-server-timing 就是为了解决这些缺点而存在的。使用 koa-server-timing，我们可以：
- 记录服务器端的请求处理时间；
- 将请求的多个阶段的耗时信息发送到前端；
- 实时查看应用程序的性能和资源使用情况。
如何使用 koa-server-timing
在 Node.js 项目中使用 koa-server-timing 很简单，只需要安装包并将其作为 koa 中间件即可。
可以通过以下命令安装 koa-server-timing：
npm install koa-server-timing
安装完成后，在你的应用程序中引入 koa-server-timing，如下所示：
const Koa = require('koa');
const Router = require('koa-router');
const timing = require('koa-server-timing');
const app = new Koa();
const router = new Router();
app.use(timing());
app.use(router.routes()).use(router.allowedMethods());引入 koa-server-timing 后，我们在路由中处理请求的过程中就可以使用相关的 API 来记录请求处理时间了。
koa-server-timing 中包括以下几种方法：
start(serverTimingName: string): 用于记录起始时间，serverTimingName是这次请求的唯一标识符。end(serverTimingName: string): 用于记录结束时间，serverTimingName是这次请求的唯一标识符。addToTotal(serverTimingName: string, duration: number): 通过serverTimingName标识的阶段耗时时长为duration，单位为毫秒。
例如，在下面的代码中，我们为路由增加了一个处理函数，该函数中记录了请求处理时间，并将其发送到前端。
-- -------------------- ---- ------- ------------------- ----- --- -- - ----- -------- - --------------- --------------------------------- --- ------------------ ----- ------------- -- -- ---- ---- ----- -------- - --- ---------------- - -------------------------- ---------------------------- ---------- -------- - ------- -------- ---
上述代码中，我们首先通过 setServerTiming() 方法记录起始时间，然后进行一些操作，最后通过 addToTotal() 方法记录处理时间。
实现效果
使用 koa-server-timing 可以将多个耗时阶段的时间信息发送到前端，例如：
HTTP/1.1 200 OK Server-Timing: cache;desc="Cache Read";dur=53.2 app;desc="Application Processing Time";dur=137.03 contentful;desc="Fetching Contentful Data";dur=147.3 render;desc="Page Rendering Time";dur=31.4
通过以上信息，我们就可以了解每个阶段的耗时情况，从而更好地优化应用程序。同时，我们也可以使用 Chrome DevTools 中的 Performance 分析工具来分析页面性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005537e81e8991b448d0ad2