[!info] related notes

• 所属 MOC: 前端性能优化 MOC
• 前置概念: HTTP, 性能指标体系
• 并列概念: FCP vs TTI, LCP
• 易混淆概念: Waterfall 与 Timing
• 关系笔记: 页面卡顿排查路线, 页面加载性能排查

首字节时间 TTFB

一句话定义

TTFB 是浏览器发出请求后，到收到服务器返回第一个字节之间花了多久。

它不是“内容下载完用了多久”，而是“服务器什么时候开始回你”。

核心内容

一次请求可以粗略拆成哪些阶段

一个请求通常会经历：

1. 浏览器准备发送
2. DNS 解析
3. TCP / TLS 建连
4. 请求发出去
5. 等服务器开始响应
6. 下载响应内容

TTFB 最关注的是第 5 段，但在实际观测里，前面的网络建立成本通常也会被一起体现进来。

它主要反映什么

• 网络往返延迟
• 服务端处理时间
• 上游依赖是否慢
• 代理、CDN、网关回源是否卡住

最直白的理解

可以把它想成：

• 不是“外卖送到你手上用了多久”
• 而是“商家多久才开始出餐并把第一份餐递出来”

所以：

• TTFB 高：开始回得慢
• 下载慢：已经开始回了，但传得慢

这是两个不同问题。

在 DevTools 里怎么看

在 Network 面板 里点开请求，看 Timing：

• Request sent
• Waiting for server response
• Content Download

其中最接近 TTFB 的通常就是 Waiting for server response。

如果这一段特别长，说明浏览器很快把请求发出去了，但服务器很久才开始返回第一个字节。

TTFB 高通常意味着什么

服务端处理慢

• 后端逻辑重
• 数据库查询慢
• 调第三方服务慢
• 鉴权链路慢
• 缓存未命中

网络往返延迟高

• 用户离服务器很远
• 网络环境差
• TLS 建连慢
• 跨区域访问

代理 / CDN / 网关到源站慢

• 边缘节点快，但回源慢
• 网关或反向代理排队
• 源站本身被上游依赖拖慢

边界与易混淆点

TTFB 和总耗时不是一回事

• TTFB：多久开始回
• Total Time：整个请求从开始到结束一共多久

例如：

• TTFB = 30s
• 下载 = 20ms

这通常说明问题不在文件太大，而在服务器很久才开口。

TTFB 高不等于一定是后端代码慢

它可能慢在：

• 服务器处理
• 数据库或第三方依赖
• 反向代理 / CDN / 网关
• 网络往返

所以看到 TTFB 高，应该继续拆链路，而不是直接把锅甩给某一层。

它和 FCP / LCP 的关系

TTFB 更偏“请求什么时候开始返回”，而 FCP、LCP 更偏“用户什么时候真的看到内容”。

TTFB 高常常会拖慢 FCP / LCP，但它们不是同一个指标。

Related notes

• 前端性能优化 MOC
• HTTP
• 性能指标体系
• FCP vs TTI