01

60 秒回答模板

INP 是 Interaction to Next Paint，衡量用户交互发生后，到浏览器下一次能够绘制反馈之间的延迟，它关注整个页面生命周期内交互响应的最差或接近最差体验，主要受主线程长任务、事件回调、渲染和第三方脚本影响。TTFB 是 Time to First Byte，从请求开始到收到响应第一个字节的时间，受 DNS、连接、TLS、网络、CDN、缓存、服务端排队和服务端渲染影响。优化 INP 要拆长任务、减少同步计算、延迟非关键脚本、优化事件处理和渲染；优化 TTFB 要做 CDN、缓存、连接复用、服务端查询优化、SSR 缓存和就近部署。

考点 核心机制与工程取舍
难度 中高频面试题
回答目标 按定义、机制、场景讲清楚
02

深入解析

01

INP 的定义

INP 衡量点击、键盘输入、触摸等交互到下一次绘制的延迟。它不是单次按钮接口耗时，而是输入延迟、事件处理时间、渲染更新时间的综合结果。

02

TTFB 的定义

TTFB 从浏览器发起文档请求开始，到响应第一个字节到达结束。它包含网络连接、TLS、请求传输、缓存命中、服务器排队、后端处理和响应开始传输等环节。

03

两者关注阶段不同

TTFB 主要影响页面初始响应和首屏链路，偏网络与服务端。INP 主要影响页面可交互后的操作体验，偏前端主线程、事件回调、渲染和第三方脚本。

04

如何定位 INP

从 Performance 面板、Long Tasks、Event Timing、React/Vue Profiler 和 RUM 数据入手，找交互发生时是否有长任务、同步计算、过大的渲染树更新或第三方脚本阻塞。

05

如何定位 TTFB

从 navigation timing 拆 DNS、connect、TLS、request、responseStart，也要结合 CDN 命中率、后端日志、数据库耗时、SSR 耗时和地域网络。不能把 TTFB 简单等同于后端接口耗时。

06

优化方向

INP 优化侧重拆任务、减少主线程阻塞、降低重渲染范围、交互优先调度和减少第三方脚本。TTFB 优化侧重缓存、CDN、边缘渲染、服务端查询优化、流式响应和减少重定向。

03

易错点

  • 把 INP 当成接口响应时间，忽略事件处理和下一次绘制。
  • 把 TTFB 等同后端业务耗时，忽略 DNS、连接、TLS、CDN 和网络。
  • 只背指标英文全称，不会说采集方式和优化方向。
  • 用实验室单次测试替代真实用户数据，不考虑设备、网络和地域差异。
04

面试官追问

INP 和 FID 有什么区别？

FID 只看首次交互的输入延迟，范围较窄。INP 覆盖页面生命周期内多次交互，并包含事件处理和下一次绘制，更能反映整体交互体验。

TTFB 高一定是后端慢吗？

不一定。DNS、TCP/TLS、重定向、跨地域网络、CDN 未命中、排队和服务端处理都在 TTFB 里，需要拆 timing 和日志定位。

如何采集 INP？

可以用 PerformanceObserver 监听 event 相关性能条目，结合交互目标、页面路由、设备和网络信息做 RUM 上报，并对异常值做采样分析。

降低 TTFB 会不会改善 INP？

通常不会直接改善。TTFB 影响文档响应和首屏加载，INP 更多受交互时主线程和渲染影响。两者可能同属性能体验，但优化路径不同。