什么情况下页面能进入往返缓存（bfcache），pageshow 事件的 persisted 属性如何帮助处理恢复逻辑？
什么情况下页面能进入往返缓存（bfcache），pageshow 事件的 persisted 属性如何帮助处理恢复逻辑？ 本文先给出可直接复述的结论，再用最小代码说明bfcache pageshow persisted 往返缓存的工作方式、判断依据、项目边界和常见误区。
核心关键词bfcache pageshow persisted 往返缓存
面试知识索引 · 分类、标签与搜索
浏览器 · 渲染与调度面试题，44 道完整答案
浏览器 · 渲染与调度面试题第 1 页，显示第 1–44 题，共找到 44 道完整解析，可继续按分类、标签与关键词缩小范围。
44筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
Element.checkVisibility 与用 offsetParent 或 getClientRects 判断元素是否可见相比，能额外覆盖哪些隐藏情形？
Element.checkVisibility 与用 offsetParent 或 getClientRects 判断元素是否可见相比，能额外覆盖哪些隐藏情形？ 本文先给出可直接复述的结论，再用最小代码说明checkVisibility 元素可见性 判断的工作方式、判断依据、项目边界和常见误区。
核心关键词checkVisibility 元素可见性 判断 - 0003
clientWidth、offsetWidth、scrollWidth 三者分别包含哪些部分，判断元素是否出现溢出该比较哪两个？
clientWidth、offsetWidth、scrollWidth 三者分别包含哪些部分，判断元素是否出现溢出该比较哪两个？ 本文先给出可直接复述的结论，再用最小代码说明clientWidth offsetWidth scrollWidth 区别 溢出的工作方式、判断依据、项目边界和常见误区。
核心关键词clientWidth offsetWidth scrollWidth 区别 溢出 - 0004
content-visibility:auto 如何跳过屏外内容的布局与绘制，它对滚动条和锚点跳转有什么副作用？
content-visibility:auto 如何跳过屏外内容的布局与绘制，它对滚动条和锚点跳转有什么副作用？ 本文先给出可直接复述的结论，再用最小代码说明content-visibility auto 跳过渲染 屏外的工作方式、判断依据、项目边界和常见误区。
核心关键词content-visibility auto 跳过渲染 屏外 - 0005
浏览器从收到 HTML 字节到首屏像素的关键渲染路径包含哪些阶段，每个阶段的输入输出是什么？
浏览器从收到 HTML 字节到首屏像素的关键渲染路径包含哪些阶段，每个阶段的输入输出是什么？ 本文先给出可直接复述的结论，再用最小代码说明关键渲染路径 DOM CSSOM 渲染树 布局 绘制 合成的工作方式、判断依据、项目边界和常见误区。
核心关键词关键渲染路径 DOM CSSOM 渲染树 布局 绘制 合成 - 0006
为什么外部样式表会阻塞首次渲染，而内联脚本必须等待之前的 CSSOM 构建完成？
为什么外部样式表会阻塞首次渲染，而内联脚本必须等待之前的 CSSOM 构建完成？ 本文先给出可直接复述的结论，再用最小代码说明CSS 阻塞渲染 CSSOM 脚本等待样式表的工作方式、判断依据、项目边界和常见误区。
核心关键词CSS 阻塞渲染 CSSOM 脚本等待样式表 - 0007
CSS contain 属性的 layout、paint、size 等取值如何让浏览器缩小一次样式变更的重算范围？
CSS contain 属性的 layout、paint、size 等取值如何让浏览器缩小一次样式变更的重算范围？ 本文先给出可直接复述的结论，再用最小代码说明CSS contain 布局隔离 渲染性能的工作方式、判断依据、项目边界和常见误区。
核心关键词CSS contain 布局隔离 渲染性能 - 0008
display:none、visibility:hidden、opacity:0 三种隐藏方式在布局、绘制、命中测试和可访问性上各有什么差异？
display:none、visibility:hidden、opacity:0 三种隐藏方式在布局、绘制、命中测试和可访问性上各有什么差异？ 本文先给出可直接复述的结论，再用最小代码说明display none visibility hidden opacity 0 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词display none visibility hidden opacity 0 区别 - 0009
document.readyState 的 loading、interactive、complete 三个值分别对应页面加载的什么时刻？
document.readyState 的 loading、interactive、complete 三个值分别对应页面加载的什么时刻？ 本文先给出可直接复述的结论，再用最小代码说明document.readyState readystatechange 加载状态的工作方式、判断依据、项目边界和常见误区。
核心关键词document.readyState readystatechange 加载状态 - 0010
DOMContentLoaded 事件与 window 的 load 事件分别等待什么资源，监听哪个会漏掉图片加载完成？
DOMContentLoaded 事件与 window 的 load 事件分别等待什么资源，监听哪个会漏掉图片加载完成？ 本文先给出可直接复述的结论，再用最小代码说明DOMContentLoaded load 事件区别 资源加载的工作方式、判断依据、项目边界和常见误区。
核心关键词DOMContentLoaded load 事件区别 资源加载 - 0011
@font-face 的 font-display 各取值如何控制字体加载期间的文本渲染，swap 与 optional 的体验差异是什么？
@font-face 的 font-display 各取值如何控制字体加载期间的文本渲染，swap 与 optional 的体验差异是什么？ 本文先给出可直接复述的结论，再用最小代码说明font-display FOIT FOUT 字体加载 渲染的工作方式、判断依据、项目边界和常见误区。
核心关键词font-display FOIT FOUT 字体加载 渲染 - 0012
什么是强制同步布局，在循环里交替写样式和读 offsetHeight 会造成什么后果、如何定位这类问题？
什么是强制同步布局，在循环里交替写样式和读 offsetHeight 会造成什么后果、如何定位这类问题？ 本文先给出可直接复述的结论，再用最小代码说明强制同步布局 layout thrashing 性能诊断的工作方式、判断依据、项目边界和常见误区。
核心关键词强制同步布局 layout thrashing 性能诊断 - 0013
以 60Hz 刷新为例，一次渲染帧的预算大约是多少，rAF 回调里的长任务为什么直接表现为掉帧？
以 60Hz 刷新为例，一次渲染帧的预算大约是多少，rAF 回调里的长任务为什么直接表现为掉帧？ 本文先给出可直接复述的结论，再用最小代码说明帧预算 16ms 掉帧 rAF 长任务的工作方式、判断依据、项目边界和常见误区。
核心关键词帧预算 16ms 掉帧 rAF 长任务 - 0014
getBoundingClientRect 与 offsetTop/offsetWidth 在参考系、小数精度和 transform 影响上有什么区别？
getBoundingClientRect 与 offsetTop/offsetWidth 在参考系、小数精度和 transform 影响上有什么区别？ 本文先给出可直接复述的结论，再用最小代码说明getBoundingClientRect offsetWidth offsetTop 区别的工作方式、判断依据、项目边界和常见误区。
核心关键词getBoundingClientRect offsetWidth offsetTop 区别 - 0015
页面里的 iframe 会怎样影响父页面 window load 事件的触发，嵌入慢第三方页面时有哪些隔离手段？
页面里的 iframe 会怎样影响父页面 window load 事件的触发，嵌入慢第三方页面时有哪些隔离手段？ 本文先给出可直接复述的结论，再用最小代码说明iframe load 阻塞 父页面 加载的工作方式、判断依据、项目边界和常见误区。
核心关键词iframe load 阻塞 父页面 加载 - 0016
img 标签的 loading=lazy 与 decoding=async 分别推迟什么工作，两者对首屏大图是否都合适？
img 标签的 loading=lazy 与 decoding=async 分别推迟什么工作，两者对首屏大图是否都合适？ 本文先给出可直接复述的结论，再用最小代码说明img loading lazy decoding async 图片懒加载 解码的工作方式、判断依据、项目边界和常见误区。
核心关键词img loading lazy decoding async 图片懒加载 解码 - 0017
IntersectionObserver 的 root、rootMargin、threshold 各控制什么，threshold 传数组会在什么情况下触发多次回调？
IntersectionObserver 的 root、rootMargin、threshold 各控制什么，threshold 传数组会在什么情况下触发多次回调？ 本文先给出可直接复述的结论，再用最小代码说明IntersectionObserver rootMargin threshold 触发语义的工作方式、判断依据、项目边界和常见误区。
核心关键词IntersectionObserver rootMargin threshold 触发语义 - 0018
做元素可见性检测时，IntersectionObserver 相比 scroll 事件里调 getBoundingClientRect 有什么本质优势？
做元素可见性检测时，IntersectionObserver 相比 scroll 事件里调 getBoundingClientRect 有什么本质优势？ 本文先给出可直接复述的结论，再用最小代码说明IntersectionObserver scroll getBoundingClientRect 可见性检测的工作方式、判断依据、项目边界和常见误区。
核心关键词IntersectionObserver scroll getBoundingClientRect 可见性检测 - 0019
页面合成层过多会导致什么问题，排查层数量异常时应该看哪些信号？
页面合成层过多会导致什么问题，排查层数量异常时应该看哪些信号？ 本文先给出可直接复述的结论，再用最小代码说明合成层过多 层爆炸 内存 GPU 栅格化的工作方式、判断依据、项目边界和常见误区。
核心关键词合成层过多 层爆炸 内存 GPU 栅格化 - 0020
如何用 PerformanceLongTaskTiming 监测页面长任务，50ms 阈值是怎么来的、attribution 能定位到什么粒度？
如何用 PerformanceLongTaskTiming 监测页面长任务，50ms 阈值是怎么来的、attribution 能定位到什么粒度？ 本文先给出可直接复述的结论，再用最小代码说明Long Tasks API 长任务监测 50ms attribution的工作方式、判断依据、项目边界和常见误区。
核心关键词Long Tasks API 长任务监测 50ms attribution - 0021
MutationObserver 的回调是按每次 DOM 变更同步触发还是批量触发，这决定了它适合和不适合什么场景？
MutationObserver 的回调是按每次 DOM 变更同步触发还是批量触发，这决定了它适合和不适合什么场景？ 本文先给出可直接复述的结论，再用最小代码说明MutationObserver 批量回调 微任务 DOM 监听的工作方式、判断依据、项目边界和常见误区。
核心关键词MutationObserver 批量回调 微任务 DOM 监听 - 0022
用 PerformanceNavigationTiming 能拆解出页面加载的哪些阶段，TTFB 偏长应看其中哪几个时间戳？
用 PerformanceNavigationTiming 能拆解出页面加载的哪些阶段，TTFB 偏长应看其中哪几个时间戳？ 本文先给出可直接复述的结论，再用最小代码说明PerformanceNavigationTiming TTFB 加载阶段拆解的工作方式、判断依据、项目边界和常见误区。
核心关键词PerformanceNavigationTiming TTFB 加载阶段拆解 - 0023
OffscreenCanvas 解决了什么渲染瓶颈，把 canvas 绘制移进 Worker 需要满足什么前提？
OffscreenCanvas 解决了什么渲染瓶颈，把 canvas 绘制移进 Worker 需要满足什么前提？ 本文先给出可直接复述的结论，再用最小代码说明OffscreenCanvas Worker 离屏渲染的工作方式、判断依据、项目边界和常见误区。
核心关键词OffscreenCanvas Worker 离屏渲染 - 0024
document.visibilityState 有哪几种取值，页面最小化与切到后台标签页分别进入哪个状态？
document.visibilityState 有哪几种取值，页面最小化与切到后台标签页分别进入哪个状态？ 本文先给出可直接复述的结论，再用最小代码说明Page Visibility API visibilityState 状态的工作方式、判断依据、项目边界和常见误区。
核心关键词Page Visibility API visibilityState 状态 - 0025
beforeunload、unload、pagehide 三个事件在触发时机与可靠性上有什么区别，移动端为什么应优先用 pagehide？
beforeunload、unload、pagehide 三个事件在触发时机与可靠性上有什么区别，移动端为什么应优先用 pagehide？ 本文先给出可直接复述的结论，再用最小代码说明beforeunload unload pagehide 区别 可靠性的工作方式、判断依据、项目边界和常见误区。
核心关键词beforeunload unload pagehide 区别 可靠性 - 0026
PerformancePaintTiming 提供的 first-paint 与 first-contentful-paint 有什么区别，FCP 偏晚通常意味着什么？
PerformancePaintTiming 提供的 first-paint 与 first-contentful-paint 有什么区别，FCP 偏晚通常意味着什么？ 本文先给出可直接复述的结论，再用最小代码说明PerformancePaintTiming FP FCP 首次绘制的工作方式、判断依据、项目边界和常见误区。
核心关键词PerformancePaintTiming FP FCP 首次绘制 - 0027
给 touchstart、wheel 监听加 passive:true 为什么能改善滚动流畅度，加上之后代码里不能再做什么？
给 touchstart、wheel 监听加 passive:true 为什么能改善滚动流畅度，加上之后代码里不能再做什么？ 本文先给出可直接复述的结论，再用最小代码说明passive 事件监听 滚动性能 preventDefault的工作方式、判断依据、项目边界和常见误区。
核心关键词passive 事件监听 滚动性能 preventDefault - 0028
HTML 解析器被脚本阻塞时，浏览器的预加载扫描器为什么还能提前发起资源请求？
HTML 解析器被脚本阻塞时，浏览器的预加载扫描器为什么还能提前发起资源请求？ 本文先给出可直接复述的结论，再用最小代码说明preload scanner 预加载扫描器 推测解析的工作方式、判断依据、项目边界和常见误区。
核心关键词preload scanner 预加载扫描器 推测解析 - 0029
哪些 DOM 读写操作会触发回流，为什么把多次几何读取集中到写入之前能减少回流次数？
哪些 DOM 读写操作会触发回流，为什么把多次几何读取集中到写入之前能减少回流次数？ 本文先给出可直接复述的结论，再用最小代码说明回流 reflow 触发 读写分离 批量更新的工作方式、判断依据、项目边界和常见误区。
核心关键词回流 reflow 触发 读写分离 批量更新 - 0030
重绘和回流的触发条件与开销有何不同，为什么修改 color 通常比修改 width 便宜？
重绘和回流的触发条件与开销有何不同，为什么修改 color 通常比修改 width 便宜？ 本文先给出可直接复述的结论，再用最小代码说明重绘 repaint 回流 reflow 区别 开销的工作方式、判断依据、项目边界和常见误区。
核心关键词重绘 repaint 回流 reflow 区别 开销 - 0031
requestAnimationFrame 的回调相对一次渲染更新的布局、绘制步骤在什么时候执行，为什么适合在里面读写 DOM？
requestAnimationFrame 的回调相对一次渲染更新的布局、绘制步骤在什么时候执行，为什么适合在里面读写 DOM？ 本文先给出可直接复述的结论，再用最小代码说明requestAnimationFrame 回调时机 渲染帧的工作方式、判断依据、项目边界和常见误区。
核心关键词requestAnimationFrame 回调时机 渲染帧 - 0032
requestIdleCallback 的回调在什么时机执行，deadline.timeRemaining 与 timeout 参数各自解决什么问题？
requestIdleCallback 的回调在什么时机执行，deadline.timeRemaining 与 timeout 参数各自解决什么问题？ 本文先给出可直接复述的结论，再用最小代码说明requestIdleCallback 空闲回调 deadline timeout的工作方式、判断依据、项目边界和常见误区。
核心关键词requestIdleCallback 空闲回调 deadline timeout - 0033
监听单个元素尺寸变化为什么要用 ResizeObserver 而不是 window 的 resize 事件，它的回调在渲染流程的哪个时机触发？
监听单个元素尺寸变化为什么要用 ResizeObserver 而不是 window 的 resize 事件，它的回调在渲染流程的哪个时机触发？ 本文先给出可直接复述的结论，再用最小代码说明ResizeObserver 元素尺寸 监听 回调时机的工作方式、判断依据、项目边界和常见误区。
核心关键词ResizeObserver 元素尺寸 监听 回调时机 - 0034
preload、prefetch、preconnect、dns-prefetch 四种资源提示分别影响加载流程的哪个环节，preload 为什么需要 as 属性？
preload、prefetch、preconnect、dns-prefetch 四种资源提示分别影响加载流程的哪个环节，preload 为什么需要 as 属性？ 本文先给出可直接复述的结论，再用最小代码说明preload prefetch preconnect 资源提示 优先级的工作方式、判断依据、项目边界和常见误区。
核心关键词preload prefetch preconnect 资源提示 优先级 - 0035
把一个大任务拆成多个小任务时，scheduler.yield 相比 setTimeout(0) 在恢复优先级上有什么优势？
把一个大任务拆成多个小任务时，scheduler.yield 相比 setTimeout(0) 在恢复优先级上有什么优势？ 本文先给出可直接复述的结论，再用最小代码说明scheduler.yield 任务拆分 让出主线程的工作方式、判断依据、项目边界和常见误区。
核心关键词scheduler.yield 任务拆分 让出主线程 - 0036
script 标签的 defer 与 async 属性在下载时机、执行顺序和相对 DOMContentLoaded 的执行点上有什么区别？
script 标签的 defer 与 async 属性在下载时机、执行顺序和相对 DOMContentLoaded 的执行点上有什么区别？ 本文先给出可直接复述的结论，再用最小代码说明script defer async 执行顺序 DOMContentLoaded的工作方式、判断依据、项目边界和常见误区。
核心关键词script defer async 执行顺序 DOMContentLoaded - 0037
setTimeout 嵌套调用超过一定层数后为什么最小延迟会变成 4ms，后台标签页中定时器还会被怎样节流？
setTimeout 嵌套调用超过一定层数后为什么最小延迟会变成 4ms，后台标签页中定时器还会被怎样节流？ 本文先给出可直接复述的结论，再用最小代码说明setTimeout 4ms 钳制 后台节流的工作方式、判断依据、项目边界和常见误区。
核心关键词setTimeout 4ms 钳制 后台节流 - 0038
为什么用 transform 和 opacity 做动画通常比修改 top/left 或 width 更流畅？
为什么用 transform 和 opacity 做动画通常比修改 top/left 或 width 更流畅？ 本文先给出可直接复述的结论，再用最小代码说明transform opacity 动画 合成线程 性能的工作方式、判断依据、项目边界和常见误区。
核心关键词transform opacity 动画 合成线程 性能 - 0039
View Transitions API 在 DOM 更新前后分别做了什么，为什么它能让状态切换变成平滑动画而不手写关键帧？
View Transitions API 在 DOM 更新前后分别做了什么，为什么它能让状态切换变成平滑动画而不手写关键帧？ 本文先给出可直接复述的结论，再用最小代码说明View Transitions API startViewTransition 过渡动画的工作方式、判断依据、项目边界和常见误区。
核心关键词View Transitions API startViewTransition 过渡动画 - 0040
实现十万条数据的虚拟列表，核心渲染策略是什么，固定行高与不定行高在实现难度上差在哪？
实现十万条数据的虚拟列表，核心渲染策略是什么，固定行高与不定行高在实现难度上差在哪？ 本文先给出可直接复述的结论，再用最小代码说明虚拟列表 长列表 渲染 窗口化的工作方式、判断依据、项目边界和常见误区。
核心关键词虚拟列表 长列表 渲染 窗口化 - 0041
基于 visibilitychange 事件，哪些类型的页面任务应该在页面隐藏时暂停或降级，为什么？
基于 visibilitychange 事件，哪些类型的页面任务应该在页面隐藏时暂停或降级，为什么？ 本文先给出可直接复述的结论，再用最小代码说明visibilitychange 暂停视频 轮询 草稿保存的工作方式、判断依据、项目边界和常见误区。
核心关键词visibilitychange 暂停视频 轮询 草稿保存 - 0042
VisualViewport API 与 window.innerWidth 衡量的视口有何不同，移动端弹出软键盘后页面布局该参考哪个？
VisualViewport API 与 window.innerWidth 衡量的视口有何不同，移动端弹出软键盘后页面布局该参考哪个？ 本文先给出可直接复述的结论，再用最小代码说明VisualViewport 视觉视口 布局视口 软键盘的工作方式、判断依据、项目边界和常见误区。
核心关键词VisualViewport 视觉视口 布局视口 软键盘 - 0043
哪类计算适合移入 Web Worker，Worker 与主线程通信的 postMessage 结构化克隆会带来什么成本？
哪类计算适合移入 Web Worker，Worker 与主线程通信的 postMessage 结构化克隆会带来什么成本？ 本文先给出可直接复述的结论，再用最小代码说明Web Worker 主线程 卸载计算 postMessage 成本的工作方式、判断依据、项目边界和常见误区。
核心关键词Web Worker 主线程 卸载计算 postMessage 成本 - 0044
CSS will-change 应该什么时候声明、为什么长期挂在大量元素上反而会拖慢页面？
CSS will-change 应该什么时候声明、为什么长期挂在大量元素上反而会拖慢页面？ 本文先给出可直接复述的结论，再用最小代码说明will-change 合成层 内存 代价的工作方式、判断依据、项目边界和常见误区。
核心关键词will-change 合成层 内存 代价