广告、嵌入 iframe 等第三方内容导致布局偏移怎么处理？
围绕“广告、嵌入 iframe 等第三方内容导致布局偏移怎么处理”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明为动态尺寸内容预留 min-height 或临时标记容器的策略。
核心关键词第三方嵌入 CLS 预留空间
面试知识索引 · 分类、标签与搜索
加载与交互性能专题面试题，41 道完整答案
加载与交互性能专题面试题第 1 页，显示第 1–41 题，共找到 41 道完整解析，可继续按分类、标签与关键词缩小范围。
41筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
技术分类52 个
全部分类5000AI Agent511浏览器301JavaScript285React281AI 开发262CSS240Node.js217TypeScript206Vue180前端工程化138React Native135
查看全部 52 个分类
热门标签178 个
全部标签加载与交互性能41并发编程448缓存355性能优化340安全336异步编程292类型系统215构建工具211容器化184流处理177表单157SQL148HTTP141路由140离线应用121
查看其余 163 个标签
网络协议111测试109数据库事务95实时通信92Web 可访问性90动画79可观测性77Agent 记忆75向量检索66工具调用66LangGraph59Prompt56任务规划53排障与运维53数据库索引52浏览器自动化51Flexbox50值与类型50GraphQL49事务与并发49构建与镜像49DNS 与 TLS48工程协作与交付48AI 评测47CSS Grid47Express 服务47MCP47副作用与同步47向量与嵌入47文件与多媒体47流与二进制47传输与协议46列表与性能46可维护代码46响应式原理46容器运行46指标日志追踪46数据建模与运维46文件与 I/O46表单与输入46MCP 协议45RAG45Vite 与模块构建45Webpack45内存与虚拟化45原生集成45多 Agent45工作负载与发布45应用与性能45数据处理45模块与工具链45组件与模板45缓存与数据结构45网络与运维45评估与调试45身份认证与授权45运行时与开发45Web 系统方案44一致性与容错44侦听与生命周期44分布式使用44原生组件与交互44可访问交互44消息与异步处理44渲染与调度44索引与执行计划44组件设计44缓存与代理44进程与并发44层叠与选择器43攻击面与防御43文档数据库43权限与安全43离线与渐进增强43语义与文档43请求与通信 API43Worker 与线程协作42事件系统42存储与离线数据42服务架构42服务端与流式渲染42服务端工程42泛型设计42版本控制42类型收窄42类型运算42组件与端到端42编码与执行42进程与线程42DOM 与文档操作41Flex 布局41HTTP 语义41NestJS 架构41REST 与接口契约41SQL 查询41动画与视觉41类型工程41记忆与状态41运行时与调度41Agent 架构40WebAssembly 集成40单元与集成测试40多 Agent 协作40工作流编排40模块与语言机制40浏览器与 UI 自动化40生产运行40函数与作用域39响应式设计39性能与并发39类型系统基础39Grid 布局38数组与集合38盒模型与排版38Hooks 与复用37应用开发37推理与成本37状态共享37知识库数据37模型与应用评测36对象与原型35状态与渲染35语言与并发35异步与 Promise34Effect32RAG 检索31React 性能31响应式与性能31微调与数据31TanStack Query30全栈边界30数据与缓存30大模型基础29路由与数据流29事件循环28流式交互28提示与上下文设计27数据与服务端27组件与依赖注入27组件与响应式27多模态应用24应用与渲染24Hydration22沙箱安全22状态管理18算法18CI/CD13语言与运行时10React Server Components6搜索与排序4实用函数实现3链表栈队列3图算法2字符串算法2树与遍历2索引与高级结构2Kubernetes1作用域与函数1动态规划1异步与浏览器1手写与交互性能1数组与双指针1相等比较1
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
为什么给图片写死 width/height 属性能防 CLS，有了 CSS aspect-ratio 还需要吗？
围绕“为什么给图片写死 width/height 属性能防 CLS，有了 CSS aspect-ratio 还需要吗”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明浏览器用宽高属性预推 aspect-ratio 预留空间。
核心关键词图片 宽高属性 CLS aspect-ratio - 0003
CLS 的会话窗口机制是什么，为什么不用简单的累计总分？
围绕“CLS 的会话窗口机制是什么，为什么不用简单的累计总分”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明按 1 秒间隔、5 秒上限的窗口取最大值。
核心关键词CLS 会话窗口 5 秒 - 0004
用户点击后 500 毫秒内的布局变化为什么可以不计入 CLS？
围绕“用户点击后 500 毫秒内的布局变化为什么可以不计入 CLS”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 hadRecentInput 排除窗口的设计意图。
核心关键词CLS 用户交互 排除 500ms - 0005
Web 字体加载完成前后的字形切换为什么会造成 CLS，如何缓解？
围绕“Web 字体加载完成前后的字形切换为什么会造成 CLS，如何缓解”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明字体度量差异导致换行变化及 size-adjust 回退字体匹配。
核心关键词字体 布局偏移 FOUT size-adjust - 0006
代码分包为什么能改善首屏性能，入口包多大开始出现明显收益递减？
围绕“代码分包为什么能改善首屏性能，入口包多大开始出现明显收益递减”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明按需加载减少解析编译与执行成本及拆包过细的请求开销权衡。
核心关键词代码分割 code splitting 首屏 - 0007
为什么 CSS 是渲染阻塞资源，media 属性如何让部分 CSS 不阻塞渲染？
围绕“为什么 CSS 是渲染阻塞资源，media 属性如何让部分 CSS 不阻塞渲染”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明渲染树依赖完整 CSSOM 及按媒体条件降级阻塞范围。
核心关键词CSS 渲染阻塞 media 查询 - 0008
用户反馈点击卡顿但本地测不出来，如何定位 INP 差的交互？
围绕“用户反馈点击卡顿但本地测不出来，如何定位 INP 差的交互”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明用现场数据、web-vitals attribution 与 Performance 面板回放定位慢交互。
核心关键词INP 定位 诊断 真实用户 - 0009
font-display 的 swap、fallback、optional 分别适合什么类型的站点？
围绕“font-display 的 swap、fallback、optional 分别适合什么类型的站点”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要对比三种策略的阻塞期与交换期行为及对 FOIT/FOUT 与 CLS 的影响。
核心关键词font-display swap fallback optional - 0010
字体要不要 preload，预加载字体的收益和代价分别是什么？
围绕“字体要不要 preload，预加载字体的收益和代价分别是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明预加载消除字体晚发现但抢占其他关键资源带宽及 crossorigin 必要性。
核心关键词字体 preload 跨域 crossorigin - 0011
中文字体几 MB 怎么破，字体子集化和 unicode-range 如何工作？
围绕“中文字体几 MB 怎么破，字体子集化和 unicode-range 如何工作”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明按 unicode-range 分包按需加载与构建期子集化两条路线。
核心关键词中文字体 子集化 unicode-range - 0012
浏览器如何决定资源的加载优先级，fetchpriority 属性能覆盖什么？
围绕“浏览器如何决定资源的加载优先级，fetchpriority 属性能覆盖什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明默认优先级推断规则与 fetchpriority 调整图片/fetch 的场景。
核心关键词资源优先级 fetchpriority - 0013
为什么建议用图片 CDN 按设备出图，自己压一套固定尺寸有什么问题？
围绕“为什么建议用图片 CDN 按设备出图，自己压一套固定尺寸有什么问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明按请求协商格式与尺寸节省带宽的价值及固定档位的浪费，不做具体 CDN 厂商对比。
核心关键词图片 CDN 自适应 压缩 - 0014
WebP、AVIF、JPEG 之间如何为照片类图片选型，为什么不全部用 AVIF？
围绕“WebP、AVIF、JPEG 之间如何为照片类图片选型，为什么不全部用 AVIF”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要比较压缩率、编码成本与兼容性并给出 picture 回退链。
核心关键词图片格式 WebP AVIF 选型 - 0015
原生 loading=lazy 的实现机制是什么，为什么首屏主图不能加？
围绕“原生 loading=lazy 的实现机制是什么，为什么首屏主图不能加”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明浏览器按视口距离延迟加载及首屏 LCP 图懒加载的反效果。
核心关键词loading lazy 图片懒加载 LCP - 0016
INP 多少算良好，为什么取第 75 分位而不是平均值？
围绕“INP 多少算良好，为什么取第 75 分位而不是平均值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 200/500ms 阈值与 p75 现场数据统计口径。
核心关键词INP 阈值 p75 200ms - 0017
INP 把一次交互分成输入延迟、处理时间、呈现延迟，分别由什么导致？
围绕“INP 把一次交互分成输入延迟、处理时间、呈现延迟，分别由什么导致”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖按三段拆分交互延迟并对应到主线程占用与渲染工作。
核心关键词INP 输入延迟 处理时间 呈现延迟 - 0018
为什么同步 JavaScript 会阻塞解析，async 和 defer 的行为差异是什么？
围绕“为什么同步 JavaScript 会阻塞解析，async 和 defer 的行为差异是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要对比默认、async、defer 的下载与执行时机及适用场景。
核心关键词script async defer 解析阻塞 - 0019
为什么 CSS background-image 不计入 LCP，这对首屏大图实现方式有什么影响？
围绕“为什么 CSS background-image 不计入 LCP，这对首屏大图实现方式有什么影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 LCP 候选元素不含 CSS 背景图并给出 hero 图的实现建议。
核心关键词LCP 背景图片 不计入 img - 0020
如何拆分 LCP 的 TTFB、资源加载延迟、渲染延迟等子阶段定位瓶颈？
围绕“如何拆分 LCP 的 TTFB、资源加载延迟、渲染延迟等子阶段定位瓶颈”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明用四个子阶段拆分 LCP 时间并按最大子阶段决定优化方向。
核心关键词LCP 子阶段 分解 优化 - 0021
为什么 Core Web Vitals 用 LCP 而不是 FCP 衡量加载体验？
围绕“为什么 Core Web Vitals 用 LCP 而不是 FCP 衡量加载体验”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释 FCP 只表示任何内容出现而 LCP 表示主要内容完成，不罗列所有性能指标。
核心关键词LCP 与 FCP 区别 - 0022
什么是长任务，为什么 50 毫秒被当作划分界限？
围绕“什么是长任务，为什么 50 毫秒被当作划分界限”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明长任务阻塞输入响应与 RAIL 100ms 预算的关系。
核心关键词长任务 50ms 主线程 - 0023
如何用 PerformanceNavigationTiming 读出一个页面加载的各阶段耗时？
围绕“如何用 PerformanceNavigationTiming 读出一个页面加载的各阶段耗时”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 fetchStart、domInteractive、loadEventEnd 等时间点的含义与计算。
核心关键词PerformanceNavigationTiming 加载瀑布 - 0024
performance.now 比 Date.now 精度高在哪，为什么实际精度仍被限制？
围绕“performance.now 比 Date.now 精度高在哪，为什么实际精度仍被限制”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明单调时钟与高分辨率及为防侧信道攻击的粗化。
核心关键词performance.now 精度 时间戳 - 0025
如何用 PerformanceObserver 采集 LCP、长任务等条目，为什么回调里可能拿不到全部数据？
围绕“如何用 PerformanceObserver 采集 LCP、长任务等条目，为什么回调里可能拿不到全部数据”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 observe buffered 选项与条目缓冲及丢帧场景。
核心关键词PerformanceObserver 采集 性能条目 - 0026
preconnect 和 dns-prefetch 分别在什么场景值得用？
围绕“preconnect 和 dns-prefetch 分别在什么场景值得用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要对比提前建连与仅 DNS 解析的成本与收益及回退写法。
核心关键词preconnect dns-prefetch 第三方源 - 0027
link rel=preload 解决什么问题，为什么必须带 as 属性？
围绕“link rel=preload 解决什么问题，为什么必须带 as 属性”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明预加载提升晚发现资源的优先级及 as 决定请求类型与去重。
核心关键词preload 预加载 as 属性 优先级 - 0028
preload 和 prefetch 都提前加载资源，使用场景怎么区分？
围绕“preload 和 prefetch 都提前加载资源，使用场景怎么区分”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 preload 服务当前页高优先级、prefetch 服务未来导航低优先级。
核心关键词preload prefetch 区别 导航预测 - 0029
第三方脚本拖慢总阻塞时间，有哪些不影响功能的治理手段？
围绕“第三方脚本拖慢总阻塞时间，有哪些不影响功能的治理手段”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明延迟加载、facade 临时标记、web worker 隔离等第三方脚本治理。
核心关键词第三方脚本 TBT 延迟加载 - 0030
srcset 和 sizes 如何配合让浏览器选对图片尺寸，sizes 写错会怎样？
围绕“srcset 和 sizes 如何配合让浏览器选对图片尺寸，sizes 写错会怎样”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 w 描述符与 sizes 槽位宽度的计算过程及错误 sizes 导致选错档。
核心关键词srcset sizes 响应式图片 - 0031
基于路由的代码分包如何落地，分包边界选路由还是组件的依据是什么？
围绕“基于路由的代码分包如何落地，分包边界选路由还是组件的依据是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明动态 import 按路由拆分及更细粒度拆分的判断标准，不绑定某个框架的 API 细节。
核心关键词路由级 代码分割 懒加载 - 0032
RUM 真实用户监控和 Lighthouse 实验室数据结论相反时该信谁？
围绕“RUM 真实用户监控和 Lighthouse 实验室数据结论相反时该信谁”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明两者数据分布、设备网络差异与各自适用决策。
核心关键词RUM 实验室数据 差异 - 0033
scheduler.postTask 的优先级队列能解决什么 setTimeout 解决不了的问题？
围绕“scheduler.postTask 的优先级队列能解决什么 setTimeout 解决不了的问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 user-blocking/background 优先级与 AbortController 取消能力。
核心关键词scheduler.postTask 优先级 任务调度 - 0034
图标用 SVG、图标字体还是雪碧图，从性能与可维护性怎么取舍？
围绕“图标用 SVG、图标字体还是雪碧图，从性能与可维护性怎么取舍”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要比较三类方案在请求数、渲染、可访问性上的差异。
核心关键词SVG 图标字体 雪碧图 取舍 - 0035
tree shaking 依赖什么前提，为什么引了 lodash 一个函数却打进整库？
围绕“tree shaking 依赖什么前提，为什么引了 lodash 一个函数却打进整库”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明静态分析要求 ESM 与 sideEffects 标记及 barrel 文件的失效场景。
核心关键词tree shaking ESM 副作用 sideEffects - 0036
可变字体在性能上是赚是亏，什么时候比多个静态字重更省？
围绕“可变字体在性能上是赚是亏，什么时候比多个静态字重更省”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖按使用字重数量与文件体积对比可变与静态字体并考虑运行时插值成本。
核心关键词可变字体 性能 字重 - 0037
为什么不建议手写监听算 Core Web Vitals，web-vitals 库处理了哪些坑？
围绕“为什么不建议手写监听算 Core Web Vitals，web-vitals 库处理了哪些坑”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明跨页面生命周期、后台标签页与 Safari 差异等边界及 attribution 构建。
核心关键词web-vitals 库 采集 归因 - 0038
什么类型的计算应该移到 Web Worker，移过去为什么不能直接操作 DOM？
围绕“什么类型的计算应该移到 Web Worker，移过去为什么不能直接操作 DOM”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 Worker 无 DOM 访问与消息传递成本决定适合纯计算任务。
核心关键词Web Worker 重计算 主线程 - 0039
什么是 CLS，它的布局偏移分数是怎么计算的？
围绕“什么是 CLS，它的布局偏移分数是怎么计算的”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明影响分数与距离分数相乘的定义及 0.1 阈值。
核心关键词CLS 累积布局偏移 计算方式 - 0040
什么是 INP，它和 FID 的度量方式有什么本质差异？
围绕“什么是 INP，它和 FID 的度量方式有什么本质差异”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 INP 观察整次交互的延迟并取接近最差值，而 FID 只测首次输入延迟。
核心关键词INP 交互到下一次绘制 FID 区别 - 0041
什么是 LCP，哪些元素会被计为 LCP 候选？
围绕“什么是 LCP，哪些元素会被计为 LCP 候选”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 LCP 的定义、2.5 秒阈值与参与计算的元素类型。
核心关键词LCP 最大内容绘制 候选元素