Q16 · 性能指标

performance.timing 能拿到哪些关键时间点？

Performance APItiming导航计时

⚡ 速记答案（30 秒）

  • navigationStart：导航开始
  • dnsLookupStart/End、connectStart/End、secureConnectionStart：DNS、TCP、TLS
  • requestStart / responseStart / responseEnd：请求与响应
  • domLoading / domInteractive / domContentLoadedEventEnd：DOM 准备情况
  • loadEventStart/End：页面 load 事件
  • 通过这些字段可以算：DNS 时间、TCP 建连时间、TTFB、DOM 解析时间、页面总加载时间等

📖 详细讲解

Navigation Timing API


> 注意：performance.timing 已废弃，推荐使用 PerformanceNavigationTiming


时间线


navigationStart
    ↓
redirectStart → redirectEnd
    ↓
fetchStart
    ↓
domainLookupStart → domainLookupEnd  (DNS)
    ↓
connectStart → connectEnd            (TCP)
    ↓
secureConnectionStart                (TLS)
    ↓
requestStart → responseStart → responseEnd
    ↓
domLoading → domInteractive → domContentLoadedEventEnd
    ↓
loadEventStart → loadEventEnd

常用计算


指标计算方式
DNS 解析domainLookupEnd - domainLookupStart
TCP 连接connectEnd - connectStart
TTFBresponseStart - requestStart
DOM 解析domInteractive - responseEnd
页面加载loadEventEnd - navigationStart

💻 代码示例

获取导航计时
// 推荐方式：使用 PerformanceNavigationTiming
const nav = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;

const metrics = {
  // 重定向时间
  redirect: nav.redirectEnd - nav.redirectStart,
  
  // DNS 解析
  dns: nav.domainLookupEnd - nav.domainLookupStart,
  
  // TCP 连接
  tcp: nav.connectEnd - nav.connectStart,
  
  // TLS 握手（如果有）
  tls: nav.secureConnectionStart > 0 
    ? nav.connectEnd - nav.secureConnectionStart 
    : 0,
  
  // 请求到首字节
  ttfb: nav.responseStart - nav.requestStart,
  
  // 内容下载
  download: nav.responseEnd - nav.responseStart,
  
  // DOM 解析
  domParse: nav.domInteractive - nav.responseEnd,
  
  // DOM Ready
  domReady: nav.domContentLoadedEventEnd - nav.fetchStart,
  
  // 页面完全加载
  load: nav.loadEventEnd - nav.fetchStart,
};

console.table(metrics);
💡
面试技巧：回答性能问题时，先说指标和标准，再讲优化手段，最后结合实际项目经验。