Server-Timing 端到端性能观测：后端指标上报、浏览器采集与优化闭环

Server-Timing 端到端性能观测：后端指标上报、浏览器采集与优化闭环技术背景Server-Timing 允许后端通过响应头向浏览器传递性能指标（如数据库、应用处理时间），浏览器可采集并可视化，形成端到端性能优化闭环。核心内容后端上报（Node/Express 示例）app.get('/api/data', async (req, res) => { const t0 = performance.now(); const db = await queryDB(); // … const t1 = performance.now(); const appStart = t1; const payload = await buildPayload(); const t2 = performance.now(); res.setHeader('Server-Timing', `db;dur=${(t1 - t0).toFixed(1)}, app;dur=${(t2 - appStart).toFixed(1)};desc=app`); res.json(payload); }); 浏览器采集与上报function collectServerTiming() { const [nav] = performance.getEntriesByType('navigation') as any[]; if (!nav?.serverTiming) return; const metrics = nav.serverTiming.map((m: any) => ({ name: m.name, dur: m.duration, desc: m.description })); navigator.sendBeacon('/rum/server-timing', JSON.stringify({ metrics, url: location.href, ts: Date.now() })); } window.addEventListener('load', collectServerTiming); 技术验证参数在 Chrome 128/Edge 130（真实流量）：指标采集成功率：≥ 95%优化命中率（针对慢路径）：≥ 70%首包与总处理时间关联分析：显著提升定位效率应用场景后端性能瓶颈与前端用户体验的协同分析多服务链路的指标可视化与治理最佳实践标准化指标名称与单位（ms），避免混乱按页面/接口建立采集与看板，驱动优化闭环与 Web Performance API 与前端指标联动（TTFB/LCP/INP）