Web Vitals 测量

共 28 题
#

1. Lighthouse、WebPageTest、PageSpeed Insights 的能力边界

A Lighthouse 适合 CI 门禁、WebPageTest 做多地点真实诊断、PSI 融合 Lab 与 CrUX 字段数据,三者互补 ✓ 正确答案
B Lighthouse 能反映真实用户性能分布
C PSI 的 CrUX 数据覆盖所有地区
D WPT 适合高频回归门禁
#

2. Cumulative Layout Shift 的 layout-shift 事件 在 RUM 与合成监测的取舍

A 合成监测能完全复现真实 CLS
B CLS 与图片尺寸无关
C CLS 由 layout-shift 事件聚合计算(session window),RUM 反映真实分布、合成监测做固定环境回归,需分层使用 ✓ 正确答案
D RUM 的 CLS 不需要按 p75 统计
#

3. Element Timing API 与 Largest Contentful Paint 拆解的工程价值

A LCP 无法知道是哪个元素
B largest-contentful-paint 条目给出 LCP 元素与时间,Element Timing 可标记自定义元素,支撑 LCP 的归因与优化闭环 ✓ 正确答案
C elementtiming 属性用于标记普通元素无效
D LCP 优化不需要定位元素
#

4. PerformanceObserver 类型 paint-timing/navigation-timing 在 LCP/FP 的测量差异

A paint-timing 描述导航过程的网络阶段
B TTFB 属于 paint-timing
C LCP 观察者只收到一条条目
D paint-timing 提供 FP/FCP/LCP 渲染里程碑(LCP 取最后条目),navigation-timing 提供导航过程节点,口径互补 ✓ 正确答案
#

5. CLS(Cumulative Layout Shift)的常见成因(无尺寸图片、动态注入)

A CLS 只由图片引起
B CLS 常见成因为无尺寸媒体、动态注入、字体切换与异步渲染,需预留空间与稳定容器系统性治理 ✓ 正确答案
C font-display 与 CLS 无关
D 广告位不产生布局偏移
#

6. LCP 的 Largest Contentful Paint 元素识别与图像/字体阻塞优化

A LCP 元素只能靠肉眼判断
B 字体加载不影响 LCP
C LCP 图可以使用 lazy 加载
D 通过 LCP 条目识别元素,图像用预加载与格式优化、字体用子集化与 font-display 等消除阻塞 ✓ 正确答案
#

7. 实验室数据(Lab)与真实用户监控(RUM)的差异

A Lab 数据代表真实用户体验
B RUM 数据可以完全复现
C Lab 在受控环境可复现、适合门禁,RUM 反映真实分布、适合告警与业务关联,两者桥接使用 ✓ 正确答案
D Lab 与 RUM 的指标语义完全相同
#

8. FCP、TTFB 与首屏指标的分解

A FCP 一定晚于 LCP
B TTFB 与网络无关
C 首屏可拆解为 TTFB、资源下载、解析执行、渲染里程碑各段,按段定位瓶颈并分别设预算优化 ✓ 正确答案
D LCP 与 FCP 测量口径相同
#

9. LCP、INP、CLS 的定义、阈值与优化策略

A LCP 衡量加载(≤2.5s)、INP 衡量响应(≤200ms)、CLS 衡量稳定(<0.1),各有针对性优化且需整体权衡 ✓ 正确答案
B INP 的 Good 阈值是 500ms
C CLS 的 Good 阈值是 0.5
D LCP 只与网络速度有关
#

10. LCP 与 INP 替代 FID的现代取舍

A INP 测量会话中所有交互的完整延迟(输入+处理+呈现),取代只测首次输入延迟的 FID ✓ 正确答案
B FID 覆盖所有交互的处理时间
C INP 与 FID 完全等价
D INP 只能测量输入延迟
#

11. Performance Server Timing API 在 RUM 与合成监测的取舍

A Server Timing 数据只存在于服务端
B 前端无法读取 Server Timing 条目
C Server-Timing 响应头把后端阶段耗时透传给前端,RUM 分析真实分布、合成监测做回归对比,跨域需 Timing-Allow-Origin ✓ 正确答案
D Server Timing 覆盖浏览器渲染耗时
#

12. SPA soft navigation 下 LCP/INP/CLS 的测量难点,PerformanceObserver 与 SPA 路由切换的归因边界

A SPA 路由切换不影响性能指标归因
B navigation-timing 可以识别 soft navigation
C SPA 的 soft navigation 使性能条目跨路由累积,需在路由切换时重置指标并按导航归因 ✓ 正确答案
D LCP 在 SPA 中只能测一次
#

13. CrUX(Chrome User Experience Report)

A CrUX 是实验室合成数据
B CrUX 覆盖所有浏览器
C CrUX 提供根因诊断信息
D CrUX 聚合 Chrome 真实用户的 CWV 分布,可作第三方基准与自家 RUM 对比,但覆盖仅 Chrome 且数据有延迟 ✓ 正确答案
#

14. Performance Budget(bundlesize/size-limit)

A 性能预算只包含 JS 体积
B size-limit 无法接入 CI
C 预算设定一次即可永久使用
D 性能预算从体积、数量、指标等多维度约束,先测基线再设目标,经 CI 门禁强制执行并定期收紧 ✓ 正确答案
#

15. INP 优化的长任务拆分策略,如何识别长任务并把计算/渲染分批以降低交互延迟?

A 长任务指主线程超过 100ms 的任务
B 长任务不影响 INP
C 所有计算都应移入 Worker
D 通过 longtask/LoAF 识别长任务,用时间切片、scheduler.yield、Worker 与并发渲染拆分,降低交互延迟 ✓ 正确答案
#

16. FID 已作为被 INP 替代的历史指标

A FID 只测首次交互的输入延迟,INP 覆盖会话内所有交互的完整延迟,因此取代 FID 成为 CWV ✓ 正确答案
B FID 覆盖所有交互的处理时间
C FID 与 INP 可以互相换算
D INP 是 FID 的别名
#

17. LCP 在 RUM 与合成监测的取舍

A 合成 LCP 反映真实用户分布
B 合成与字段的 LCP 必然一致
C RUM 的 LCP 不可按设备下钻
D 合成 LCP 适合回归门禁与诊断,字段 LCP 反映真实用户分布用于监控告警,两者不一致时以字段为准 ✓ 正确答案
#

18. INP 交互归因(attribution)与 LoAF 结合的定位流程,从用户交互到具体代码行的诊断路径

A INP 归因只能知道延迟数值
B 第三方脚本无法归因
C LoAF 不包含脚本归因
D INP attribution 定位交互元素与延迟拆解,LoAF 提供长帧脚本与渲染明细,可逐层诊断到具体代码 ✓ 正确答案
#

19. PerformanceObserver API 在前端实时性能监控的工程价值

A PerformanceObserver 只能一次性读取快照
B PerformanceObserver 事件驱动订阅性能条目,buffered 读取历史数据,是前端实时性能监控的基础 ✓ 正确答案
C buffered: true 无法读取历史条目
D 观察者模式不适合监控长任务
#

20. Navigation Timing API 与 Resource Timing API 在加载性能分析的边界

A Navigation Timing 管页面级阶段耗时,Resource Timing 管资源级明细,组合分析定位加载瓶颈 ✓ 正确答案
B Navigation Timing 描述每个子资源的加载时序
C resource-timing 覆盖所有跨域资源
D TTFB 属于 resource-timing
#

21. Frame Timing API(PerformanceFrameTiming)在动画与渲染性能的工程监测

A PerformanceFrameTiming 支持有限,工程上常用 rAF 间隔、Long Tasks 与 LoAF 间接监测渲染帧健康度 ✓ 正确答案
B frame 条目在所有浏览器中完整支持
C 长任务不会导致掉帧
D rAF 间隔无法测量帧率
#

22. 真实用户监控(RUM)相较 Lighthouse 实验室测试的工程价值

A Lighthouse 能反映真实用户设备分布
B RUM 无法关联业务指标
C RUM 提供真实分布与业务关联,Lighthouse 提供可复现诊断与门禁,两者"RUM 定方向、Lab 定根因"协同 ✓ 正确答案
D Lab 数据可以替代 RUM
#

23. web-vitals 库的 attribution 构建(LCP 元素/资源、CLS 来源、INP 交互归因)在问题定位的工程价值,与基础构建的取舍?

A attribution 构建与基础构建体积相同
B attribution 无法归因 LCP 元素
C attribution 构建提供元素/来源/交互等归因字段加速问题定位,但体积与开销更大,宜按需或采样启用 ✓ 正确答案
D 基础构建提供归因字段
#

24. Web Vitals 报告(web-vitals/reportHandler)在 CI 与生产的工程应用

A reportHandler 只用于生产上报
B CI 无法注入 web-vitals
C 上报不需要处理抽样与去重
D reportHandler 回调聚合指标批量上报(sendBeacon/keepalive),CI 中注入同一测量代码做性能断言,保证口径一致 ✓ 正确答案
#

25. TTFB(Time to First Byte)在 CDN 与边缘缓存的工程优化

A TTFB 经 CDN 就近接入、缓存命中(SWR)、边缘渲染与 Early Hints 分层优化,缩短 LCP 第一段 ✓ 正确答案
B TTFB 只取决于服务端处理速度
C HTML 应无条件长缓存
D 103 状态码无需浏览器支持
#

26. FCP(First Contentful Paint)与 LCP 的差异在首屏体验的工程取舍

A LCP 一定早于 FCP
B 骨架屏不影响 CLS
C FCP 与 LCP 测量同一元素
D FCP 是首块内容出现、LCP 是最大内容可见,按页面类型确定主导指标并权衡与其他指标的冲突 ✓ 正确答案
#

27. INP 在长任务分解(yield to main)的工程实践与边界

A yield 可以解决所有主线程问题
B scheduler.yield 在可中断的分段任务中让出主线程降低交互延迟,但有过调度开销且不可中断任务无法让出 ✓ 正确答案
C yield 会让任务变慢所以不应使用
D rAF 适合任何时机的让出
#

28. PerformanceObserver 的 buffered: true 选项,为何能拿到注册前已产生的性能条目,以及 entry buffer 溢出与掉条目(dropped entries)的工程边界?

A buffered: true 可以拿到任意久远的历史条目
B buffered: true 从环形缓冲区读取注册前的条目,缓冲区溢出会丢条目,需尽早注册、及时消费并扩容 ✓ 正确答案
C 资源条目缓冲区不会满
D buffered 条目会重复回调