广告、嵌入 iframe 等第三方内容导致布局偏移怎么处理？
广告、嵌入 iframe 等第三方内容导致布局偏移怎么处理？ 本文先给出可直接复述的结论，再用最小代码说明第三方嵌入 CLS 预留空间的工作方式、判断依据、项目边界和常见误区。
核心关键词第三方嵌入 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 还需要吗？ 本文先给出可直接复述的结论，再用最小代码说明图片 宽高属性 CLS aspect-ratio的工作方式、判断依据、项目边界和常见误区。
核心关键词图片 宽高属性 CLS aspect-ratio - 0003
CLS 的会话窗口机制是什么，为什么不用简单的累计总分？
CLS 的会话窗口机制是什么，为什么不用简单的累计总分？ 本文先给出可直接复述的结论，再用最小代码说明CLS 会话窗口 5 秒的工作方式、判断依据、项目边界和常见误区。
核心关键词CLS 会话窗口 5 秒 - 0004
用户点击后 500 毫秒内的布局变化为什么可以不计入 CLS？
用户点击后 500 毫秒内的布局变化为什么可以不计入 CLS？ 本文先给出可直接复述的结论，再用最小代码说明CLS 用户交互 排除 500ms的工作方式、判断依据、项目边界和常见误区。
核心关键词CLS 用户交互 排除 500ms - 0005
Web 字体加载完成前后的字形切换为什么会造成 CLS，如何缓解？
Web 字体加载完成前后的字形切换为什么会造成 CLS，如何缓解？ 本文先给出可直接复述的结论，再用最小代码说明字体 布局偏移 FOUT size-adjust的工作方式、判断依据、项目边界和常见误区。
核心关键词字体 布局偏移 FOUT size-adjust - 0006
代码分包为什么能改善首屏性能，入口包多大开始出现明显收益递减？
代码分包为什么能改善首屏性能，入口包多大开始出现明显收益递减？ 本文先给出可直接复述的结论，再用最小代码说明代码分割 code splitting 首屏的工作方式、判断依据、项目边界和常见误区。
核心关键词代码分割 code splitting 首屏 - 0007
为什么 CSS 是渲染阻塞资源，media 属性如何让部分 CSS 不阻塞渲染？
为什么 CSS 是渲染阻塞资源，media 属性如何让部分 CSS 不阻塞渲染？ 本文先给出可直接复述的结论，再用最小代码说明CSS 渲染阻塞 media 查询的工作方式、判断依据、项目边界和常见误区。
核心关键词CSS 渲染阻塞 media 查询 - 0008
用户反馈点击卡顿但本地测不出来，如何定位 INP 差的交互？
用户反馈点击卡顿但本地测不出来，如何定位 INP 差的交互？ 本文先给出可直接复述的结论，再用最小代码说明INP 定位 诊断 真实用户的工作方式、判断依据、项目边界和常见误区。
核心关键词INP 定位 诊断 真实用户 - 0009
font-display 的 swap、fallback、optional 分别适合什么类型的站点？
font-display 的 swap、fallback、optional 分别适合什么类型的站点？ 本文先给出可直接复述的结论，再用最小代码说明font-display swap fallback optional的工作方式、判断依据、项目边界和常见误区。
核心关键词font-display swap fallback optional - 0010
字体要不要 preload，预加载字体的收益和代价分别是什么？
字体要不要 preload，预加载字体的收益和代价分别是什么？ 本文先给出可直接复述的结论，再用最小代码说明字体 preload 跨域 crossorigin的工作方式、判断依据、项目边界和常见误区。
核心关键词字体 preload 跨域 crossorigin - 0011
中文字体几 MB 怎么破，字体子集化和 unicode-range 如何工作？
中文字体几 MB 怎么破，字体子集化和 unicode-range 如何工作？ 本文先给出可直接复述的结论，再用最小代码说明中文字体 子集化 unicode-range的工作方式、判断依据、项目边界和常见误区。
核心关键词中文字体 子集化 unicode-range - 0012
浏览器如何决定资源的加载优先级，fetchpriority 属性能覆盖什么？
浏览器如何决定资源的加载优先级，fetchpriority 属性能覆盖什么？ 本文先给出可直接复述的结论，再用最小代码说明资源优先级 fetchpriority的工作方式、判断依据、项目边界和常见误区。
核心关键词资源优先级 fetchpriority - 0013
为什么建议用图片 CDN 按设备出图，自己压一套固定尺寸有什么问题？
为什么建议用图片 CDN 按设备出图，自己压一套固定尺寸有什么问题？ 本文先给出可直接复述的结论，再用最小代码说明图片 CDN 自适应 压缩的工作方式、判断依据、项目边界和常见误区。
核心关键词图片 CDN 自适应 压缩 - 0014
WebP、AVIF、JPEG 之间如何为照片类图片选型，为什么不全部用 AVIF？
WebP、AVIF、JPEG 之间如何为照片类图片选型，为什么不全部用 AVIF？ 本文先给出可直接复述的结论，再用最小代码说明图片格式 WebP AVIF 选型的工作方式、判断依据、项目边界和常见误区。
核心关键词图片格式 WebP AVIF 选型 - 0015
原生 loading=lazy 的实现机制是什么，为什么首屏主图不能加？
原生 loading=lazy 的实现机制是什么，为什么首屏主图不能加？ 本文先给出可直接复述的结论，再用最小代码说明loading lazy 图片懒加载 LCP的工作方式、判断依据、项目边界和常见误区。
核心关键词loading lazy 图片懒加载 LCP - 0016
INP 多少算良好，为什么取第 75 分位而不是平均值？
INP 多少算良好，为什么取第 75 分位而不是平均值？ 本文先给出可直接复述的结论，再用最小代码说明INP 阈值 p75 200ms的工作方式、判断依据、项目边界和常见误区。
核心关键词INP 阈值 p75 200ms - 0017
INP 把一次交互分成输入延迟、处理时间、呈现延迟，分别由什么导致？
INP 把一次交互分成输入延迟、处理时间、呈现延迟，分别由什么导致？ 本文先给出可直接复述的结论，再用最小代码说明INP 输入延迟 处理时间 呈现延迟的工作方式、判断依据、项目边界和常见误区。
核心关键词INP 输入延迟 处理时间 呈现延迟 - 0018
为什么同步 JavaScript 会阻塞解析，async 和 defer 的行为差异是什么？
为什么同步 JavaScript 会阻塞解析，async 和 defer 的行为差异是什么？ 本文先给出可直接复述的结论，再用最小代码说明script async defer 解析阻塞的工作方式、判断依据、项目边界和常见误区。
核心关键词script async defer 解析阻塞 - 0019
为什么 CSS background-image 不计入 LCP，这对首屏大图实现方式有什么影响？
为什么 CSS background-image 不计入 LCP，这对首屏大图实现方式有什么影响？ 本文先给出可直接复述的结论，再用最小代码说明LCP 背景图片 不计入 img的工作方式、判断依据、项目边界和常见误区。
核心关键词LCP 背景图片 不计入 img - 0020
如何拆分 LCP 的 TTFB、资源加载延迟、渲染延迟等子阶段定位瓶颈？
如何拆分 LCP 的 TTFB、资源加载延迟、渲染延迟等子阶段定位瓶颈？ 本文先给出可直接复述的结论，再用最小代码说明LCP 子阶段 分解 优化的工作方式、判断依据、项目边界和常见误区。
核心关键词LCP 子阶段 分解 优化 - 0021
为什么 Core Web Vitals 用 LCP 而不是 FCP 衡量加载体验？
为什么 Core Web Vitals 用 LCP 而不是 FCP 衡量加载体验？ 本文先给出可直接复述的结论，再用最小代码说明LCP 与 FCP 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词LCP 与 FCP 区别 - 0022
什么是长任务，为什么 50 毫秒被当作划分界限？
什么是长任务，为什么 50 毫秒被当作划分界限？ 本文先给出可直接复述的结论，再用最小代码说明长任务 50ms 主线程的工作方式、判断依据、项目边界和常见误区。
核心关键词长任务 50ms 主线程 - 0023
如何用 PerformanceNavigationTiming 读出一个页面加载的各阶段耗时？
如何用 PerformanceNavigationTiming 读出一个页面加载的各阶段耗时？ 本文先给出可直接复述的结论，再用最小代码说明PerformanceNavigationTiming 加载瀑布的工作方式、判断依据、项目边界和常见误区。
核心关键词PerformanceNavigationTiming 加载瀑布 - 0024
performance.now 比 Date.now 精度高在哪，为什么实际精度仍被限制？
performance.now 比 Date.now 精度高在哪，为什么实际精度仍被限制？ 本文先给出可直接复述的结论，再用最小代码说明performance.now 精度 时间戳的工作方式、判断依据、项目边界和常见误区。
核心关键词performance.now 精度 时间戳 - 0025
如何用 PerformanceObserver 采集 LCP、长任务等条目，为什么回调里可能拿不到全部数据？
如何用 PerformanceObserver 采集 LCP、长任务等条目，为什么回调里可能拿不到全部数据？ 本文先给出可直接复述的结论，再用最小代码说明PerformanceObserver 采集 性能条目的工作方式、判断依据、项目边界和常见误区。
核心关键词PerformanceObserver 采集 性能条目 - 0026
preconnect 和 dns-prefetch 分别在什么场景值得用？
preconnect 和 dns-prefetch 分别在什么场景值得用？ 本文先给出可直接复述的结论，再用最小代码说明preconnect dns-prefetch 第三方源的工作方式、判断依据、项目边界和常见误区。
核心关键词preconnect dns-prefetch 第三方源 - 0027
link rel=preload 解决什么问题，为什么必须带 as 属性？
link rel=preload 解决什么问题，为什么必须带 as 属性？ 本文先给出可直接复述的结论，再用最小代码说明preload 预加载 as 属性 优先级的工作方式、判断依据、项目边界和常见误区。
核心关键词preload 预加载 as 属性 优先级 - 0028
preload 和 prefetch 都提前加载资源，使用场景怎么区分？
preload 和 prefetch 都提前加载资源，使用场景怎么区分？ 本文先给出可直接复述的结论，再用最小代码说明preload prefetch 区别 导航预测的工作方式、判断依据、项目边界和常见误区。
核心关键词preload prefetch 区别 导航预测 - 0029
第三方脚本拖慢总阻塞时间，有哪些不影响功能的治理手段？
第三方脚本拖慢总阻塞时间，有哪些不影响功能的治理手段？ 本文先给出可直接复述的结论，再用最小代码说明第三方脚本 TBT 延迟加载的工作方式、判断依据、项目边界和常见误区。
核心关键词第三方脚本 TBT 延迟加载 - 0030
srcset 和 sizes 如何配合让浏览器选对图片尺寸，sizes 写错会怎样？
srcset 和 sizes 如何配合让浏览器选对图片尺寸，sizes 写错会怎样？ 本文先给出可直接复述的结论，再用最小代码说明srcset sizes 响应式图片的工作方式、判断依据、项目边界和常见误区。
核心关键词srcset sizes 响应式图片 - 0031
基于路由的代码分包如何落地，分包边界选路由还是组件的依据是什么？
基于路由的代码分包如何落地，分包边界选路由还是组件的依据是什么？ 本文先给出可直接复述的结论，再用最小代码说明路由级 代码分割 懒加载的工作方式、判断依据、项目边界和常见误区。
核心关键词路由级 代码分割 懒加载 - 0032
RUM 真实用户监控和 Lighthouse 实验室数据结论相反时该信谁？
RUM 真实用户监控和 Lighthouse 实验室数据结论相反时该信谁？ 本文先给出可直接复述的结论，再用最小代码说明RUM 实验室数据 差异的工作方式、判断依据、项目边界和常见误区。
核心关键词RUM 实验室数据 差异 - 0033
scheduler.postTask 的优先级队列能解决什么 setTimeout 解决不了的问题？
scheduler.postTask 的优先级队列能解决什么 setTimeout 解决不了的问题？ 本文先给出可直接复述的结论，再用最小代码说明scheduler.postTask 优先级 任务调度的工作方式、判断依据、项目边界和常见误区。
核心关键词scheduler.postTask 优先级 任务调度 - 0034
图标用 SVG、图标字体还是雪碧图，从性能与可维护性怎么取舍？
图标用 SVG、图标字体还是雪碧图，从性能与可维护性怎么取舍？ 本文先给出可直接复述的结论，再用最小代码说明SVG 图标字体 雪碧图 取舍的工作方式、判断依据、项目边界和常见误区。
核心关键词SVG 图标字体 雪碧图 取舍 - 0035
tree shaking 依赖什么前提，为什么引了 lodash 一个函数却打进整库？
tree shaking 依赖什么前提，为什么引了 lodash 一个函数却打进整库？ 本文先给出可直接复述的结论，再用最小代码说明tree shaking ESM 副作用 sideEffects的工作方式、判断依据、项目边界和常见误区。
核心关键词tree shaking ESM 副作用 sideEffects - 0036
可变字体在性能上是赚是亏，什么时候比多个静态字重更省？
可变字体在性能上是赚是亏，什么时候比多个静态字重更省？ 本文先给出可直接复述的结论，再用最小代码说明可变字体 性能 字重的工作方式、判断依据、项目边界和常见误区。
核心关键词可变字体 性能 字重 - 0037
为什么不建议手写监听算 Core Web Vitals，web-vitals 库处理了哪些坑？
为什么不建议手写监听算 Core Web Vitals，web-vitals 库处理了哪些坑？ 本文先给出可直接复述的结论，再用最小代码说明web-vitals 库 采集 归因的工作方式、判断依据、项目边界和常见误区。
核心关键词web-vitals 库 采集 归因 - 0038
什么类型的计算应该移到 Web Worker，移过去为什么不能直接操作 DOM？
什么类型的计算应该移到 Web Worker，移过去为什么不能直接操作 DOM？ 本文先给出可直接复述的结论，再用最小代码说明Web Worker 重计算 主线程的工作方式、判断依据、项目边界和常见误区。
核心关键词Web Worker 重计算 主线程 - 0039
什么是 CLS，它的布局偏移分数是怎么计算的？
什么是 CLS，它的布局偏移分数是怎么计算的？ 本文先给出可直接复述的结论，再用最小代码说明CLS 累积布局偏移 计算方式的工作方式、判断依据、项目边界和常见误区。
核心关键词CLS 累积布局偏移 计算方式 - 0040
什么是 INP，它和 FID 的度量方式有什么本质差异？
什么是 INP，它和 FID 的度量方式有什么本质差异？ 本文先给出可直接复述的结论，再用最小代码说明INP 交互到下一次绘制 FID 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词INP 交互到下一次绘制 FID 区别 - 0041
什么是 LCP，哪些元素会被计为 LCP 候选？
什么是 LCP，哪些元素会被计为 LCP 候选？ 本文先给出可直接复述的结论，再用最小代码说明LCP 最大内容绘制 候选元素的工作方式、判断依据、项目边界和常见误区。
核心关键词LCP 最大内容绘制 候选元素