INP 与现代性能指标

共 18 题
#

1. INP(Interaction to Next Paint)取代 FID 成为 Core Web Vitals 的原因?INP 的测量口径与优化路径(拆分长任务/scheduler.yield)?

A FID 比 INP 覆盖更全面
B INP 覆盖所有交互的完整响应延迟并取代 FID,测量取 p75,优化聚焦拆分长任务与 scheduler.yield 减少主线程阻塞 ✓ 正确答案
C INP 只测量首次输入
D INP 不需要考虑处理时长
#

2. LCP 优化的四段拆解(TTFB/资源加载延迟/加载时长/渲染延迟)与各段的针对性手段?

A LCP 可拆为 TTFB、资源加载延迟、加载时长、渲染延迟四段,各段对应网络、发现、下载、渲染的针对性优化 ✓ 正确答案
B LCP 优化只需压缩图片
C TTFB 与 LCP 无关
D LCP 只有一个优化环节
#

3. LoAF(Long Animation Frames)API 如何辅助 INP 调试,如何识别阻塞交互的长任务、第三方脚本和渲染耗时?LoAF 与 PerformanceObserver 的配合使用?

A LoAF 只能标记长任务时长,无法定位来源
B LoAF 提供 duration/scripts 分段归因,配合 PerformanceObserver 采集,可定位阻塞 INP 的第一方/第三方脚本与渲染耗时 ✓ 正确答案
C LoAF 与 INP 无关
D LoAF 无法被浏览器观察
#

4. React/Vue 框架中优化 INP 的实践,React 的 startTransition/useDeferredValue、Vue 的异步组件和虚拟列表如何降低交互延迟?

A startTransition 会提升所有更新的优先级
B 框架无法优化 INP
C 虚拟列表会渲染所有 DOM 项
D React 的 startTransition/useDeferredValue 把非紧急更新降级为可中断/可延迟,Vue 用异步组件与虚拟列表减负,共同降低交互延迟优化 INP ✓ 正确答案
#

5. INP(Interaction to Next Paint)的度量,交互延迟与响应性?

A INP 度量交互到下一帧的完整延迟,含输入延迟、处理时长、呈现延迟,取最差交互的 p75,反映交互响应性 ✓ 正确答案
B INP 只度量输入延迟
C INP 取所有交互的平均值
D INP 与响应性无关
#

6. Core Web Vitals 演进,LCP/CLS/INP 的优化优先级?

A CWV 优化必须严格按固定顺序
B FID 已取代 INP
C CWV 由 LCP/INP/CLS 构成,优化优先级应结合 RUM 数据与业务影响确定,先解决最差且影响面最大的指标 ✓ 正确答案
D CWV 只有加载指标
#

7. SPA 软导航(soft navigation)下 LCP 测量口径的最新变更,Chrome 软导航启发式与 Soft Navigation API 如何影响 LCP/CLS/INP 的字段数据归因?

A 软导航与整页加载测量无区别
B Chrome 软导航启发式与 Soft Navigation API 识别 SPA 路由切换,为每次软导航建立独立测量分段,使 LCP/CLS/INP 归因更准确 ✓ 正确答案
C SPA 无法测量性能指标
D 软导航只影响 CLS
#

8. bfcache(往返缓存)的命中条件与被禁用的常见原因排查?

A bfcache 缓存页面状态供往返秒恢复,活跃连接、未清理监听器等会禁用,可用 DevTools 排查命中原因 ✓ 正确答案
B bfcache 会重新加载页面
C bfcache 与性能无关
D 所有页面都能命中 bfcache
#

9. Speculation Rules API 的预渲染(prerender)与传统 prefetch 的差异?

A Speculation Rules 的 prefetch 只取资源,prerender 完整预渲染目标页面实现零延迟跳转但消耗更多资源,需按导航概率控制 ✓ 正确答案
B prerender 与 prefetch 完全相同
C prerender 不执行 JS
D prefetch 会渲染页面
#

10. INP 与 TBT(Total Blocking Time)的关系,为什么实验室指标 TBT 无法完全替代字段指标 INP?两者在优化方向上的一致性?

A TBT 能完全替代 INP
B TBT 是 Lab 加载期长任务阻塞指标,INP 是 Field 交互响应指标,口径不同不能完全替代,但优化方向都指向减少主线程阻塞 ✓ 正确答案
C TBT 与 INP 无任何关系
D INP 只在加载期测量
#

11. INP 的三段拆解(Input Delay / Processing Duration / Presentation Delay),每段的常见瓶颈和优化手段(事件委托、scheduler.yield、减少重排)?

A 优化 INP 只需处理输入延迟
B 三段无法分别优化
C 事件委托会增加 INP
D INP 三段(输入延迟、处理时长、呈现延迟)各有瓶颈,事件委托减轻回调、scheduler.yield 减少阻塞、减少重排加速呈现,分段对症优化 ✓ 正确答案
#

12. INP 的字段数据(Field Data)采集与分析,CrUX/RUM 中 INP 的 p75 阈值(200ms/500ms)含义、设备类型和连接速度对 INP 分布的影响?

A INP 阈值只反映最差用户
B 设备类型不影响 INP
C INP 字段数据经 RUM/CrUX 采集,p75 阈值(200ms/500ms)反映大多数用户,低端设备与慢网络会推高 INP,需按维度切分分析 ✓ 正确答案
D p75 表示最差 75% 用户
#

13. 性能指标的测量,PerformanceObserver 与 lab/field 数据?

A PerformanceObserver 是性能采集机制,lab 数据可控可复现、field 数据反映真实用户,二者结合构成完整观测 ✓ 正确答案
B PerformanceObserver 只能用于 lab 测量
C field 数据不可复现所以不可用
D PerformanceObserver 无法采集性能条目
#

14. 长任务的拆分,时间切片与并发渲染?

A 时间切片会把任务变慢
B 时间切片把长任务分批让出主线程,并发渲染在框架层拆分渲染并优先紧急更新,共同降低交互延迟 ✓ 正确答案
C 并发渲染阻塞输入
D 长任务无法拆分
#

15. 优化 INP 的手段,事件委托、懒执行与主线程降载?

A 事件委托减少回调开销、懒执行延迟非关键工作、主线程降载用 Worker 移走重型计算,共同优化 INP ✓ 正确答案
B 事件委托会增加监听器数量
C 懒执行会阻塞交互
D Worker 无法用于主线程降载
#

16. 性能预算与 CI 门禁,Lighthouse 与 Web Vitals 集成?

A 性能预算只能人工检查
B CI 无法检查性能
C 性能预算配 Lighthouse CI 门禁在 PR 阻断超预算,Web Vitals 集成做 Lab 门禁 + Field 验证,构成持续性能治理 ✓ 正确答案
D Web Vitals 无法用于门禁
#

17. 第三方脚本(广告/分析/嵌入组件)对 INP 的影响归因,LoAF 与 Event Timing 的 third-party 分类如何定位与治理长任务来源?

A 第三方脚本不影响 INP
B 第三方脚本无法被归因
C LoAF 与 Event Timing 的 third-party 分类可定位第三方脚本占用的长任务,通过降级、懒加载、移除治理 INP 影响 ✓ 正确答案
D 广告脚本必须同步加载
#

18. Speed Index(SI)作为实验室指标如何由视频帧的视觉完整性(visual completeness)曲线计算(约每 100ms 采样未完成百分比并积分),它与 LCP 的度量口径差异在哪,为什么只能用于同环境对比而不能作为字段指标?

A Speed Index 由视觉完整性曲线约每 100ms 采样积分,衡量整体视觉加载,与 LCP 单点口径不同,依赖视频帧只能用于同环境 Lab 对比 ✓ 正确答案
B SI 与 LCP 度量口径相同
C SI 可以用于跨环境字段对比
D SI 只关注单一元素