广告、嵌入 iframe 等第三方内容导致布局偏移怎么处理？
围绕“广告、嵌入 iframe 等第三方内容导致布局偏移怎么处理”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明为动态尺寸内容预留 min-height 或临时标记容器的策略。
核心关键词第三方嵌入 CLS 预留空间
面试知识索引 · 分类、标签与搜索
前端性能 · 性能优化面试题，41 道完整答案
前端性能 · 性能优化面试题第 1 页，显示第 1–41 题，共找到 41 道完整解析，可继续按分类、标签与关键词缩小范围。
41筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
技术分类52 个
全部分类5000前端性能41AI Agent511浏览器301JavaScript285React281AI 开发262CSS240Node.js217TypeScript206Vue180前端工程化138
查看全部 52 个分类
React Native135操作系统135数据库134Docker95计算机网络94API 设计90Kubernetes90HTML89Redis89全栈开发88分布式系统88系统设计86HTTP85Next.js60Angular58Linux53Nuxt51PostgreSQL46可观测性46设计模式46小程序45身份与权限45无障碍44MongoDB43PWA43Web 安全43Git42前端测试42WebAssembly40测试40AI 工程37SvelteKit37Go35前端数据管理30React Router29AI 全栈28Svelte27算法12Java10数据结构5前端手写题3
第 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 最大内容绘制 候选元素