Server-Timing 响应头可直接被浏览器解析展示于 Performance 面板和 API 中，无需前端 SDK；需后端注入标准格式键值对（如 db;dur=42.6），并配合 Timing-Allow-Origin 头解决跨域限制。
可以直接在 HTTP 响应头中写入 Server-Timing，浏览器会在 Performance 面板和 Performance API 中自动解析并展示，无需前端额外加载 SDK 或埋点代码。
服务端注入 Server-Timing 响应头
关键是在后端返回响应时，通过标准 HTTP Header 注入计时数据。格式为键值对，支持多个指标用逗号分隔：
-
基础写法：
Server-Timing: db;dur=42.6, cache;dur=8.1, auth;dur=15.3 -
带描述的写法：
Server-Timing: db;desc="DB query";dur=42.6, cache;desc="Redis lookup";dur=8.1 -
标记命中/未命中状态：
Server-Timing: cdn;desc="CDN hit";dur=2.1, origin;desc="Origin fetch";dur=98.7
注意：dur 单位是毫秒（ms），必须为数字；desc 是可选字符串，用于 DevTools 中悬停查看说明；多个条目之间用英文逗号+空格分隔。
前端控制台直接查看与审计
注入后，开发者无需任何 JS 代码即可在 Chrome / Edge / Firefox 的「Network」面板中查看：
- 选中任意请求 → 切换到「Timing」标签页 → 底部展开「Server Timing」区域，可见各字段耗时条形图
- 在「Performance」面板录制页面行为 → 查看「Timings」轨道，Server-Timing 条目会以彩色横条形式出现在「HTTP Request」下方
- 打开 Console，执行
performance.getEntriesByType('navigation')[0].serverTiming可读取原始数组（需页面为导航触发，如 F5 刷新）
配合 PerformanceObserver 实现自动化采集
若需将 Server-Timing 数据上报或做聚合分析，可用 PerformanceObserver 监听 navigation 类型条目：
- 它能捕获每次页面加载中完整的
serverTiming数组，每个 entry 对应一个导航请求 - 示例代码中需包裹 try/catch，因 Safari 旧版本对
type: 'navigation'抛异常 - 建议只监听 production 环境下的特定路径（如含
/api/的 XHR 请求），可通过 Resource Timing API 捕获资源请求的serverTiming
跨域场景下确保 Timing 数据可见
若接口部署在独立域名（如 api.example.com），浏览器默认屏蔽跨域 timing 信息。需后端同步设置：
-
Timing-Allow-Origin: *（允许所有来源） - 或更安全地写为
Timing-Allow-Origin: https://app.example.com - 该 Header 必须与
Server-Timing同时存在，且不能被代理层（如 Nginx、CDN）过滤掉
不复杂但容易忽略：很多团队加了 Server-Timing 却没配 Timing-Allow-Origin，结果控制台始终为空。
