前端性能优化 30 问：从指标口径到权衡决策

性能优化是前端面试的必考题，但多数回答停留在「懒加载、压缩、CDN」的背诵层面。这份 30 问按面试官的真实追问路径组织：从指标口径，到加载/渲染/执行三个层面，再到权衡决策——每一问都给出「合格回答」与「加分回答」的差别。

一、指标与口径（6 问）

1. Core Web Vitals 是哪三个指标，阈值分别是多少？

LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1（p75 口径，见 web.dev）。加分点：主动说明 INP 于 2024 年 3 月取代 FID，且衡量的是所有交互的最差响应而非首个交互。

2. LCP 候选元素可能是哪些？

首屏最大的图片、背景图、video 首帧、文本块。加分点：知道 LCP 可能变化（更大元素出现会更新），以及 element.getBoundingClientRect 不可靠、要用 PerformanceObserver。

3. 为什么 INP 比 FID 严格？

FID 只测首个交互的输入延迟，INP 测整个生命周期内所有交互的最差情况，覆盖输入延迟 + 事件处理 + 渲染提交的完整链路。 hydrate 未完成时绑定的交互会在 INP 上现形。

4. TTFB 高说明什么？

服务端慢、网络链路差或 CDN 未命中。它是 LCP 的前置瓶颈——TTFB 占掉 1s，前端优化空间就被压缩一半。

5. 实验室数据与真实用户（RUM）数据的差异？

实验室可控可回归但设备/网络理想化；RUM 反映真实分布（看 p75 而不是均值）。生产决策以 RUM 为准，发布门禁用实验室。

6. 采样率怎么定？

头部页面高采样、长尾低采样；错误类全量、性能类按流量分级。关键是保证 p75 统计的样本量充足。

二、加载优化（9 问）

7. 关键渲染路径是什么？怎么压缩？

HTML → CSSOM → DOM → 渲染树 → 布局 → 绘制。压缩手段：CSS 内联关键样式、非关键 CSS 异步加载、JS 加 defer/async、减少阻塞资源。

8. script 的 defer 与 async 区别？

都不阻塞解析；defer 按序在 DOMContentLoaded 前执行，async 下载完立即执行顺序不定。有依赖用 defer，独立脚本用 async。

9. 图片优化的完整清单？

WebP/AVIF 格式、响应式 srcset + sizes、懒加载（loading="lazy"）、首屏图 preload + fetchpriority=”high”、尺寸约束防 CLS。

10. 预加载家族怎么用？

dns-prefetch 提前解析、preconnect 建连、preload 当前页关键资源、prefetch 下一页资源、modulepreload 模块。加分点：说明 preload 滥用会浪费带宽并触发控制台告警。

11. 缓存策略怎么设计？

带 hash 的静态资源 Cache-Control: max-age=31536000, immutable；HTML 用 no-cache 协商缓存；接口按业务定（私有数据 no-store）。

12. 强缓存与协商缓存的触发条件？

强缓存命中不发请求（Expires/Cache-Control）；协商缓存发请求验证（ETag/If-None-Match 或 Last-Modified/If-Modified-Since），304 返回空体。

13. CDN 命中率怎么优化？

URL 稳定化（hash 变化只影响变化的文件）、合理设置源站缓存头、预热热门资源、回源合并（coalescing）。

14. 首屏接口多且相互依赖怎么办？

服务端聚合（BFF 一次下发）、无依赖接口并行、下游数据 SSR 直出。核心思路：把「浏览器视角的瀑布」变成「服务端内网的并行」。

15. 骨架屏的价值与陷阱？

降低感知延迟、约束布局防 CLS；陷阱是骨架与真实内容布局不一致时反而增加跳动感。

三、渲染与执行优化（10 问）

16. 重排（reflow）与重绘（repaint）的区别与优化？

重排涉及几何计算，代价远高于重绘。批量修改（DocumentFragment、class 切换）、读写分离（避免交替读写布局属性）、transform/opacity 走合成层。

17. 什么是长任务？怎么处理？

> 50ms 的任务。拆分（切片 + scheduler.yield/setTimeout）、移入 Web Worker、延迟非关键逻辑。

18. requestIdleCallback 与 requestAnimationFrame 的分工？

rAF 在下一帧绘制前执行，适合动画；rIC 在空闲期执行，适合低优先级任务（有 timeout 兜底）。加分点：知道 Safari 长期不支持 rIC，可用 scheduler API 替代。

19. 虚拟列表的原理与边界情况？

只渲染可视区 + 缓冲区，用总高度占位 + transform 偏移。边界：不定高（需测量或预估校正）、快速滚动白屏（加大缓冲）、搜索定位（要索引）。

20. 防抖与节流的选择？

防抖合并停止后的最后一次（搜索输入），节流固定频率执行（滚动、拖拽）。加分点：能说出两者在「首触立即执行」变体上的实现差异。

21. JS 内存泄漏的常见来源与排查？

未清理的定时器/监听器、闭包持有大对象、脱离 DOM 的引用、无限增长的缓存。排查用 DevTools Memory 的堆快照对比。

22. Web Worker 的适用与不适用？

适用：纯计算（解析、加解密、大数据处理）。不适用：DOM 操作、需要频繁与主线程同步小数据的场景（通信开销反噬收益）。

23. 如何优化 INP？

定位最差交互 → 看事件处理器是否同步做重活 → 拆分/延迟非关键更新 → 输入后先做视觉反馈（如 optimism UI）再异步完成。

24. 字体加载闪烁（FOUT/FOIT）怎么处理？

font-display: swap + 字体子集化 + preload；对品牌字体可接受 swap，正文用系统字体栈兜底。

25. CSS 怎么防 CLS？

媒体元素预设宽高（aspect-ratio）、动态内容预留空间、避免在首屏上方插入内容、字体用 size-adjust 匹配。

四、工程与权衡（5 问）

26. 代码分割的粒度怎么定？

路由级必拆，组件级按「共享度 × 体积」拆：共享高体积大的拆，私有小组件不拆（避免请求碎片化）。

27. tree shaking 失效的常见原因？

sideEffects 未配置、CommonJS 混用、动态访问属性、babel 转译破坏 ESM 语法。

28. 性能预算怎么落地？

量化为硬指标（JS ≤ 200KB gzip、LCP ≤ 2.5s），写进 CI 门禁与 bundle 分析比对，超预算阻断合并。

29. 首屏优化已到极限，还差 300ms，去哪找？

按链路排查：TTFB（边缘缓存/SSR 流式）、关键资源数（内联合并）、渲染阻塞（CSS 拆分）、接口瀑布（预取并行）。加分点：先看 p75 分布定位是「普遍慢」还是「尾部慢」，策略完全不同。

30. 优化与可维护性冲突时怎么决策？

用数据说话：预估收益（影响多少 p75 用户）× 实现成本 × 维护成本，收益大的先做；「感觉会快」的优化默认不做。这一问考察的是工程判断力，没有标准答案。