performance.timing 是浏览器原生性能监控 API，用于测量页面加载各阶段耗时。通过 navigationStart、domInteractive、loadEventEnd 等时间戳，可计算 DNS 查询、TCP 连接、TTFB、DOM 解析及首屏时间。虽已废弃，现代方案推荐 Navigation Timing Level 2 以获取 FCP/LCP 等 Core Web Vitals 指标。前端可通过上报数据诊断性能瓶颈，结合后端 Server-Timing 头实现前后端协作优化，定位 TTFB 过高或 DOM 解析慢等问题。
performance.timing 是浏览器提供的原生性能监控 API，用于精确测量页面加载各阶段耗时。对前端开发者而言，它是诊断首屏性能瓶颈、优化用户体验的重要工具。
performance.timing 是一个只读对象，包含页面加载过程中 15+ 个时间戳（单位：毫秒，自 Unix 纪元）。
| 字段 | 含义 | 说明 |
|---|
| navigationStart | 导航开始时间 | 所有时间的基准（用户点击链接/回车） |
| domainLookupStart | DNS 查询开始 | |
| domainLookupEnd | DNS 查询结束 | DNS 耗时 = domainLookupEnd - domainLookupStart |
| connectStart | TCP 连接开始 | |
| connectEnd | TCP 连接结束 | TCP 耗时 = connectEnd - connectStart |
| requestStart | HTTP 请求开始 | |
| responseStart | HTTP 响应首字节 | TTFB（Time To First Byte） = responseStart - navigationStart |
| responseEnd | HTTP 响应结束 | |
| domLoading | DOM 解析开始 | |
| domInteractive | DOM 就绪（可交互） | 关键：用户可操作时间 |
| domContentLoadedEventEnd | DOMContentLoaded 事件结束 | JS 执行完毕 |
| loadEventEnd | load 事件结束 | 完整页面加载完成 |
📌 注意：performance.timing已废弃（但所有浏览器仍支持）；现代替代：performance.getEntriesByType('navigation')[0]（Navigation Timing API Level 2）。
'首屏时间'无标准定义，但通常指用户看到主要内容的时间。常用三种指标：
计算：
const fcp = performance.getEntriesByName('first-contentful-paint')[0]; console.log('FCP:', fcp.startTime);
⚠️ performance.timing 无法直接获取 FCP/FP， 只能估算：首屏 ≈ domInteractive（DOM 解析完成，CSSOM 就绪）；完全加载 = loadEventEnd - navigationStart。
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 });
| 指标 | 耗时 | 优化方向 |
|---|---|---|
| DNS | 20 | DNS 预解析（） |
| TCP | 50 | HTTP/2 + 连接复用 |
| TTFB | 300 | PHP 优化、OPcache、DB 查询 |
| DOM 解析 | 200 | 减少 HTML 体积、JS 异步加载 |
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 })});});
在 PHP 响应头添加 Server-Timing：
header('Server-Timing: db;dur=150, app;dur=50');
performance.timing 已废弃，推荐使用：
// 获取导航性能（等效于 performance.timing）const nav = performance.getEntriesByType('navigation')[0];// 获取 FCP（首屏内容渲染）const fcp = performance.getEntriesByName('first-contentful-paint')[0];// 获取资源加载详情const resources = performance.getEntriesByType('resource');
利用 Server-Timing：
// 在 PHP 中标记关键阶段$start=microtime(true);// ... DB 查询 ...$dbTime=(microtime(true)-$start)*1000;header("Server-Timing: db;dur=$dbTime");
| 概念 | performance.timing | 现代方案 |
|---|---|---|
| 核心价值 | 测量页面加载各阶段耗时 | 支持 Core Web Vitals |
| 首屏时间 | 估算（domInteractive） | 精确（FCP/LCP） |
| TTFB | ✅ 精确 | ✅ 精确 |
| 前端优化 | 指导 HTML/JS 优化 | 指导用户体验优化 |
| 后端联动 | 通过 TTFB 定位 PHP/DB 问题 | 通过 Server-Timing 暴露内部耗时 |
✅ 对 PHP 程序员的终极价值： 用 performance.timing 证明： '慢'不是前端问题，而是后端 TTFB 高。
掌握此 API， 你就能用数据驱动前后端协作， 而非陷入'甩锅'争论。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online