性能优化专题面试题第 2 页，显示第 51–100 题，共找到 340 道完整解析，可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
PerformancePaintTiming 提供的 first-paint 与 first-contentful-paint 有什么区别，FCP 偏晚通常意味着什么？ 本文先给出可直接复述的结论，再用最小代码说明PerformancePaintTiming FP FCP 首次绘制的工作方式、判断依据、项目边界和常见误区。
给 touchstart、wheel 监听加 passive:true 为什么能改善滚动流畅度，加上之后代码里不能再做什么？ 本文先给出可直接复述的结论，再用最小代码说明passive 事件监听 滚动性能 preventDefault的工作方式、判断依据、项目边界和常见误区。
为什么用 transform 和 opacity 做动画通常比修改 top/left 或 width 更流畅？ 本文先给出可直接复述的结论，再用最小代码说明transform opacity 动画 合成线程 性能的工作方式、判断依据、项目边界和常见误区。
什么时候应该用 IndexedDB 游标而不是直接用 get 或 index？ 本文先给出可直接复述的结论，再用最小代码说明IndexedDB 游标适用场景与性能的工作方式、判断依据、项目边界和常见误区。
localStorage 存储中 JSON 序列化和深层嵌套有什么问题？ 本文先给出可直接复述的结论，再用最小代码说明localStorage 存 JSON 嵌套对象的问题的工作方式、判断依据、项目边界和常见误区。
用 Transferable 对象（如 ArrayBuffer）在 Worker 间传递数据，有什么性能和安全优势？ 本文先给出可直接复述的结论，再用最小代码说明Transferable ArrayBuffer 零拷贝传递的工作方式、判断依据、项目边界和常见误区。
contain: layout 限制内部布局对外部的影响，contain: paint 约束绘制范围；它们能缩小浏览器需要处理的区域，却也可能改变定位参照与溢出可见性。contain: size 与 content-visibility 的关系不同，页面若依赖内容自动撑高不能直接套用。
:has() 能按后代或相邻元素的状态选择当前元素，例如表单里有无无效输入、卡片里是否存在图片。它的优先级取决于参数选择器，复杂匹配也可能增加样式计算成本；用它选择父级时还要考虑支持范围和备选样式。
3D 变换、will-change、固定定位等都会触发合成层提升。讲解合成层的原理、will-change 的正确用法和常见的滥用问题，以及怎么在 DevTools 里检查层数。
CSS 自定义属性在动画中频繁修改会触发样式重算和布局回流，导致掉帧。了解浏览器对自定义属性和原生属性的处理差异，掌握用 @property 注册后走合成层的优化方案。
给图片加 filter: grayscale() 后用 transition 平滑去色的写法很简单，但 filter 过渡每帧都要重新计算像素，图片大或数量多时容易掉帧。了解 will-change 提升合成层和限制作用域的优化手段。
对比 transition-property 取 all 与显式列出属性的实际差异：浏览器只为变化属性创建过渡，帧开销接近；真正区别在意外过渡触发、时长不可拆分和维护风险。
媒体查询本身通常不是性能瓶颈。浏览器会在视口或相关设备条件变化时重新判断匹配，并对受影响的样式重新计算。真正昂贵的往往是命中后触发的大量布局变化、复杂选择器、重型图片或脚本测量与写入交错。
Kafka 生产者 acks=0、acks=1 和 acks=all 分别牺牲什么可靠性？ 本文先给出可直接复述的结论，再用最小代码说明Kafka producer acks 0 1 all 可靠性的工作方式、判断依据、项目边界和常见误区。
Docker 容器写文件时 OverlayFS 的写时复制（copy-on-write）会发生什么？ 本文先给出可直接复述的结论，再用最小代码说明Docker OverlayFS copy-on-write 原理的工作方式、判断依据、项目边界和常见误区。
跨架构构建时 QEMU 模拟何时被触发，对构建速度有何影响？ 本文先给出可直接复述的结论，再用最小代码说明Docker buildx QEMU 交叉构建 性能的工作方式、判断依据、项目边界和常见误区。
如何用 --cpuset-cpus 把 Docker 容器绑定到指定 CPU 核，这解决什么性能问题？ 本文先给出可直接复述的结论，再用最小代码说明Docker cpuset-cpus CPU 绑定 亲和性的工作方式、判断依据、项目边界和常见误区。
为什么写入容器可写层的数据性能差且随容器消失，而挂载卷能避免这两点？ 本文先给出可直接复述的结论，再用最小代码说明Docker 可写层 copy-on-write 卷 性能的工作方式、判断依据、项目边界和常见误区。
DocumentFragment 是用来解决什么问题的？ 本文先给出可直接复述的结论，再用最小代码说明DocumentFragment 作用的工作方式、判断依据、项目边界和常见误区。
在 Express 项目中用 JSON Schema / Zod / Joi 做校验相比手写 if 判断，设计取舍是什么？ 本文先给出可直接复述的结论，再用最小代码说明Express 请求校验 schema Zod Joi 选型的工作方式、判断依据、项目边界和常见误区。
超大型前端 monorepo 中 git log/status 变慢，commit-graph 文件如何加速历史遍历？ 本文先给出可直接复述的结论，再用最小代码说明git commit-graph 大仓库 性能的工作方式、判断依据、项目边界和常见误区。
广告、嵌入 iframe 等第三方内容导致布局偏移怎么处理？ 本文先给出可直接复述的结论，再用最小代码说明第三方嵌入 CLS 预留空间的工作方式、判断依据、项目边界和常见误区。
为什么给图片写死 width/height 属性能防 CLS，有了 CSS aspect-ratio 还需要吗？ 本文先给出可直接复述的结论，再用最小代码说明图片 宽高属性 CLS aspect-ratio的工作方式、判断依据、项目边界和常见误区。
CLS 的会话窗口机制是什么，为什么不用简单的累计总分？ 本文先给出可直接复述的结论，再用最小代码说明CLS 会话窗口 5 秒的工作方式、判断依据、项目边界和常见误区。
用户点击后 500 毫秒内的布局变化为什么可以不计入 CLS？ 本文先给出可直接复述的结论，再用最小代码说明CLS 用户交互 排除 500ms的工作方式、判断依据、项目边界和常见误区。
Web 字体加载完成前后的字形切换为什么会造成 CLS，如何缓解？ 本文先给出可直接复述的结论，再用最小代码说明字体 布局偏移 FOUT size-adjust的工作方式、判断依据、项目边界和常见误区。
代码分包为什么能改善首屏性能，入口包多大开始出现明显收益递减？ 本文先给出可直接复述的结论，再用最小代码说明代码分割 code splitting 首屏的工作方式、判断依据、项目边界和常见误区。
为什么 CSS 是渲染阻塞资源，media 属性如何让部分 CSS 不阻塞渲染？ 本文先给出可直接复述的结论，再用最小代码说明CSS 渲染阻塞 media 查询的工作方式、判断依据、项目边界和常见误区。
用户反馈点击卡顿但本地测不出来，如何定位 INP 差的交互？ 本文先给出可直接复述的结论，再用最小代码说明INP 定位 诊断 真实用户的工作方式、判断依据、项目边界和常见误区。
font-display 的 swap、fallback、optional 分别适合什么类型的站点？ 本文先给出可直接复述的结论，再用最小代码说明font-display swap fallback optional的工作方式、判断依据、项目边界和常见误区。
字体要不要 preload，预加载字体的收益和代价分别是什么？ 本文先给出可直接复述的结论，再用最小代码说明字体 preload 跨域 crossorigin的工作方式、判断依据、项目边界和常见误区。
中文字体几 MB 怎么破，字体子集化和 unicode-range 如何工作？ 本文先给出可直接复述的结论，再用最小代码说明中文字体 子集化 unicode-range的工作方式、判断依据、项目边界和常见误区。
浏览器如何决定资源的加载优先级，fetchpriority 属性能覆盖什么？ 本文先给出可直接复述的结论，再用最小代码说明资源优先级 fetchpriority的工作方式、判断依据、项目边界和常见误区。
为什么建议用图片 CDN 按设备出图，自己压一套固定尺寸有什么问题？ 本文先给出可直接复述的结论，再用最小代码说明图片 CDN 自适应 压缩的工作方式、判断依据、项目边界和常见误区。
WebP、AVIF、JPEG 之间如何为照片类图片选型，为什么不全部用 AVIF？ 本文先给出可直接复述的结论，再用最小代码说明图片格式 WebP AVIF 选型的工作方式、判断依据、项目边界和常见误区。
原生 loading=lazy 的实现机制是什么，为什么首屏主图不能加？ 本文先给出可直接复述的结论，再用最小代码说明loading lazy 图片懒加载 LCP的工作方式、判断依据、项目边界和常见误区。
INP 多少算良好，为什么取第 75 分位而不是平均值？ 本文先给出可直接复述的结论，再用最小代码说明INP 阈值 p75 200ms的工作方式、判断依据、项目边界和常见误区。
INP 把一次交互分成输入延迟、处理时间、呈现延迟，分别由什么导致？ 本文先给出可直接复述的结论，再用最小代码说明INP 输入延迟 处理时间 呈现延迟的工作方式、判断依据、项目边界和常见误区。
为什么同步 JavaScript 会阻塞解析，async 和 defer 的行为差异是什么？ 本文先给出可直接复述的结论，再用最小代码说明script async defer 解析阻塞的工作方式、判断依据、项目边界和常见误区。
为什么 CSS background-image 不计入 LCP，这对首屏大图实现方式有什么影响？ 本文先给出可直接复述的结论，再用最小代码说明LCP 背景图片 不计入 img的工作方式、判断依据、项目边界和常见误区。
如何拆分 LCP 的 TTFB、资源加载延迟、渲染延迟等子阶段定位瓶颈？ 本文先给出可直接复述的结论，再用最小代码说明LCP 子阶段 分解 优化的工作方式、判断依据、项目边界和常见误区。
为什么 Core Web Vitals 用 LCP 而不是 FCP 衡量加载体验？ 本文先给出可直接复述的结论，再用最小代码说明LCP 与 FCP 区别的工作方式、判断依据、项目边界和常见误区。
什么是长任务，为什么 50 毫秒被当作划分界限？ 本文先给出可直接复述的结论，再用最小代码说明长任务 50ms 主线程的工作方式、判断依据、项目边界和常见误区。
如何用 PerformanceNavigationTiming 读出一个页面加载的各阶段耗时？ 本文先给出可直接复述的结论，再用最小代码说明PerformanceNavigationTiming 加载瀑布的工作方式、判断依据、项目边界和常见误区。
performance.now 比 Date.now 精度高在哪，为什么实际精度仍被限制？ 本文先给出可直接复述的结论，再用最小代码说明performance.now 精度 时间戳的工作方式、判断依据、项目边界和常见误区。
如何用 PerformanceObserver 采集 LCP、长任务等条目，为什么回调里可能拿不到全部数据？ 本文先给出可直接复述的结论，再用最小代码说明PerformanceObserver 采集 性能条目的工作方式、判断依据、项目边界和常见误区。
preconnect 和 dns-prefetch 分别在什么场景值得用？ 本文先给出可直接复述的结论，再用最小代码说明preconnect dns-prefetch 第三方源的工作方式、判断依据、项目边界和常见误区。
link rel=preload 解决什么问题，为什么必须带 as 属性？ 本文先给出可直接复述的结论，再用最小代码说明preload 预加载 as 属性 优先级的工作方式、判断依据、项目边界和常见误区。
preload 和 prefetch 都提前加载资源，使用场景怎么区分？ 本文先给出可直接复述的结论，再用最小代码说明preload prefetch 区别 导航预测的工作方式、判断依据、项目边界和常见误区。
第三方脚本拖慢总阻塞时间，有哪些不影响功能的治理手段？ 本文先给出可直接复述的结论，再用最小代码说明第三方脚本 TBT 延迟加载的工作方式、判断依据、项目边界和常见误区。
