npm 包 server-timing-header 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

随着互联网技术的发展以及网站功能的越来越复杂，前端性能优化已经渐成热门话题。而对于开发人员来说，真正衡量性能的指标是时间。因此，了解如何精确度量各个阶段的性能数据对于优化非常重要。而这就需要使用 server-timing-header 这个 npm 包了。

什么是 server-timing-header

当我们打开某个网站时，通常需要等待两个重要的时间：Time To First Byte (TTFB) 和 DomContentLoaded (DCL)，它们代表着请求后首次接收到服务器数据的时间和页面 DOM 加载完成的时间。在这两个时间段内，所有的可量化 HTTP 性能指标都应该插入一个服务器计时标头，以便更好地理解 Web 应用程序的性能表现。

server-timing-header 是 W3C 规范之一，它允许开发者获取 Web 服务器的服务时间，包括处理时间、生成首次字节时间和传输时间等等。这个包让我们可以通过在响应头中添加时间信息的方式，可以在 Chrome 开发工具中直接查看性能指标，帮助开发者调试应用性能问题。

安装 server-timing-header

安装 server-timing-header 可以使用 npm 包管理器。打开命令行终端，输入以下命令即可完成安装：

npm install server-timing-header

使用 server-timing-header

首先在头文件中引入 server-timing-header：

const serverTiming = require('server-timing-header');

在请求处理函数中使用 server-timing-header 设置起始时间和结束时间，最后返回响应头：

const handler = (req, res) => {
  const timing = serverTiming('myservice');
 
  // start execution
  timing.start('myoperation');
 
  // do some heavy work...
  
  // end operation 
  timing.end('myoperation');

  // write some data to the response...
  res.writeHead(200, {'Content-Type': 'text/plain'});

  // send the timing header
  res.addTrailers(serverTiming.getHeaders());

  res.end();
}

在 Chrome 开发工具中查看响应头数据：

在 Chrome 浏览器中，打开开发者工具（F12）选择 Network，刷新页面，选中需要分析的请求，在 Headers 中找到 Response Headers，即可查看响应头中包含的 Server Timing 数据了。

示例代码

// 引入 server-timing-header
const serverTiming = require('server-timing-header');

// 定义服务器请求处理函数
const handler = (req, res) => {
  const timing = serverTiming('mywebapp');

  timing.start('db-connection');
  // 连接数据库...
  timing.end('db-connection');

  timing.start('get-users');
  // 获取用户...
  timing.end('get-users');

  timing.start('generate-html');
  // 生成 HTML...
  timing.end('generate-html');

  // 设置响应头中的 server timing 数据
  res.addTrailers(serverTiming.getHeaders());

  res.writeHead(200, {'Content-Type': 'text/html'});
  res.write('<html><head><title>Server Timing Example</title></head><body>Hello, World!</body></html>');
  res.end();
};

总结

使用 server-timing-header 可以轻松地在 Chrome 开发工具中查看性能指标。了解如何使用此 npm 包对于性能优化非常有帮助。在实际开发中，我们可以通过使用 server-timing-header 来深入了解服务器、数据库和应用的性能，进而进行相应的优化。希望这篇文章对大家有帮助。

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