Q7 · 性能指标

如何用代码获取 TTFB？指标分数段？怎么提升？

TTFB服务端优化CDN

⚡ 速记答案（30 秒）

  • 获取：performance.getEntriesByType("navigation")[0].responseStart - startTime
  • 分数段：好 < 0.8s；一般 0.8–1.8s；差 > 1.8s（视业务而定）
  • 后端：减少服务器处理时间、使用缓存/读写分离、优化数据库
  • 网络：使用 CDN，就近节点、HTTP/2/3、压缩传输
  • 配置：DNS 预解析、连接复用、TLS 优化

📖 详细讲解

TTFB 定义


Time to First Byte：从请求发出到收到服务器响应的第一个字节的时间。


TTFB 组成


TTFB = DNS 解析 + TCP 连接 + TLS 握手 + 请求发送 + 服务器处理 + 响应传输

优化策略


1. 网络层

• 使用 CDN

• 开启 HTTP/2 或 HTTP/3

• DNS 预解析


2. 服务端

• 优化数据库查询

• 使用缓存（Redis、Memcached）

• 优化服务器配置


3. 前端

• 预连接

• 预解析

💻 代码示例

获取 TTFB
// 获取页面 TTFB
const navEntry = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
const ttfb = navEntry.responseStart - navEntry.requestStart;
console.log('TTFB:', ttfb, 'ms');

// 获取详细时间分解
console.log('DNS:', navEntry.domainLookupEnd - navEntry.domainLookupStart);
console.log('TCP:', navEntry.connectEnd - navEntry.connectStart);
console.log('TLS:', navEntry.secureConnectionStart > 0 
  ? navEntry.connectEnd - navEntry.secureConnectionStart 
  : 0);
预连接优化
<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="https://api.example.com" />

<!-- 预连接（包含 DNS + TCP + TLS） -->
<link rel="preconnect" href="https://api.example.com" />

<!-- 预加载关键资源 -->
<link rel="preload" href="/critical.js" as="script" />
💡
面试技巧：回答性能问题时，先说指标和标准，再讲优化手段，最后结合实际项目经验。