请解释如何使用 Server Timing API 测量服务器端性能？

推荐答案

// www.javascriptcn.com code example
// 在服务器端设置 Server-Timing 头
res.set('Server-Timing', 'db;dur=53, cache;dur=1.2');

// 在客户端通过 Performance API 获取 Server Timing 数据
const entries = performance.getEntriesByType('navigation');
const serverTiming = entries[0].serverTiming;

// 遍历并输出 Server Timing 数据
serverTiming.forEach(entry => {
  console.log(`${entry.name}: ${entry.duration}ms`);
});

本题详细解读

什么是 Server Timing API？

Server Timing API 是一种允许服务器将性能指标传递给客户端的机制。通过 HTTP 响应头 Server-Timing，服务器可以将各种操作的耗时信息发送给客户端，客户端可以通过 Performance API 获取这些信息并进行分析。

如何使用 Server Timing API？

1. 服务器端设置：

   • 在服务器端，通过设置 HTTP 响应头 Server-Timing 来传递性能指标。每个指标由名称和持续时间组成，格式为 name;dur=value，多个指标之间用逗号分隔。
   • 例如：res.set('Server-Timing', 'db;dur=53, cache;dur=1.2'); 表示数据库查询耗时 53 毫秒，缓存查询耗时 1.2 毫秒。

2. 客户端获取：

   • 在客户端，可以通过 performance.getEntriesByType('navigation') 获取页面导航的性能条目。
   • 每个导航条目包含一个 serverTiming 属性，它是一个数组，包含了服务器传递的所有性能指标。

3. 遍历并输出：

   • 通过遍历 serverTiming 数组，可以获取每个性能指标的名称和持续时间，并将其输出到控制台或进行进一步的分析。

示例代码

// www.javascriptcn.com code example
// 在服务器端设置 Server-Timing 头
res.set('Server-Timing', 'db;dur=53, cache;dur=1.2');

// 在客户端通过 Performance API 获取 Server Timing 数据
const entries = performance.getEntriesByType('navigation');
const serverTiming = entries[0].serverTiming;

// 遍历并输出 Server Timing 数据
serverTiming.forEach(entry => {
  console.log(`${entry.name}: ${entry.duration}ms`);
});

注意事项

• Server-Timing 头的内容不应包含敏感信息，因为它会暴露给客户端。
• 该 API 主要用于开发和调试阶段，帮助开发者了解服务器端性能瓶颈。
• 并非所有浏览器都支持 Server Timing API，使用时需注意兼容性。