performance.timing 首屏时间计算与优化

const fcp = performance.getEntriesByName('first-contentful-paint')[0]; console.log('FCP:', fcp.startTime);

3. TTI（Time to Interactive）

• 页面可交互（元素可点击、输入）；
• 计算复杂，需第三方库（如 tti-polyfill）。

⚠️ performance.timing 无法直接获取 FCP/FP， 只能估算：首屏 ≈ domInteractive（DOM 解析完成，CSSOM 就绪）；完全加载 = loadEventEnd - navigationStart。

三、用 performance.timing 估算关键指标

const t = performance.timing;// 1. DNS 查询耗时 const dns = t.domainLookupEnd - t.domainLookupStart;// 2. TCP 连接耗时 const tcp = t.connectEnd - t.connectStart;// 3. TTFB（后端响应速度）const ttfb = t.responseStart - t.navigationStart;// 4. 内容传输耗时 const contentTransfer = t.responseEnd - t.responseStart;// 5. DOM 解析耗时 const domParse = t.domInteractive - t.responseEnd;// 6. 首屏时间（估算）const firstScreen = t.domInteractive - t.navigationStart;// 7. 完全加载时间 const fullLoad = t.loadEventEnd - t.navigationStart; console.table({ dns, tcp, ttfb, contentTransfer, domParse, firstScreen, fullLoad });

典型输出（单位：ms）：

四、实战用法：前端性能监控

1. 上报性能数据

window.addEventListener('load',()=>{const t = performance.timing;const firstScreen = t.domInteractive - t.navigationStart;// 上报到监控系统 fetch('/perf-log',{method:'POST',body:JSON.stringify({ firstScreen,url: location.href })});});

2. 诊断慢页面

• 若 TTFB > 500ms → 后端问题（PHP/DB）；
• 若 DOM 解析 > 500ms → 前端问题（大 HTML、同步 JS）；
• 若 TCP > 100ms → 网络问题（跨机房、无 CDN）。

3. 与后端联动

• 前端通过 performance.getEntriesByType('navigation')[0].serverTiming 读取。

在 PHP 响应头添加 Server-Timing：

header('Server-Timing: db;dur=150, app;dur=50');

五、现代替代方案：Navigation Timing Level 2

performance.timing 已废弃，推荐使用：

// 获取导航性能（等效于 performance.timing）const nav = performance.getEntriesByType('navigation')[0];// 获取 FCP（首屏内容渲染）const fcp = performance.getEntriesByName('first-contentful-paint')[0];// 获取资源加载详情const resources = performance.getEntriesByType('resource');

优势：

• 支持 FCP、FP、LCP 等 Core Web Vitals；
• 支持 Resource Timing（单个 JS/CSS 耗时）；
• 支持 Server-Timing（后端自定义指标）。

六、PHP 程序员如何利用？

1. 监控 TTFB：
   • 若 ttfb > 300ms，用 xhprof/EXPLAIN 优化 PHP/DB；
2. 减少响应体积：
   • 开启 Gzip：ob_start('ob_gzhandler')；
   • 移除无用 HTML/JS；

利用 Server-Timing：

// 在 PHP 中标记关键阶段$start=microtime(true);// ... DB 查询 ...$dbTime=(microtime(true)-$start)*1000;header("Server-Timing: db;dur=$dbTime");

七、总结

✅ 对 PHP 程序员的终极价值： 用 performance.timing 证明： '慢'不是前端问题，而是后端 TTFB 高。

掌握此 API， 你就能用数据驱动前后端协作， 而非陷入'甩锅'争论。