渲染与调度专题面试题第 1 页，显示第 1–44 题，共找到 44 道完整解析，可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
围绕“什么情况下页面能进入往返缓存（bfcache），pageshow 事件的 persisted 属性如何帮助处理恢复逻”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 bfcache 让页面整体冻结恢复而非重新加载、监听 unload 等会使其失效，并用 persisted 区分是否从缓存恢复。
围绕“Element.checkVisibility 与用 offsetParent 或 getClientRects 判”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明它统一检查 display、visibility、content-visibility 等多种不可见来源及 opacity 等选。
围绕“clientWidth、offsetWidth、scrollWidth 三者分别包含哪些部分，判断元素是否出现溢出该”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须用边框、内边距、滚动内容三个维度区分三者构成，并给出溢出判断的组合。
围绕“content-visibility:auto 如何跳过屏外内容的布局与绘制，它对滚动条和锚点跳转有什么副作用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明浏览器用临时标记尺寸延迟渲染屏外子树的机制与 contain-intrinsic-size 的配合。
围绕“浏览器从收到 HTML 字节到首屏像素的关键渲染路径包含哪些阶段，每个阶段的输入输出是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答要按顺序说明解析、样式计算、布局、分层、绘制、栅格化、合成各阶段的产物与依赖。
围绕“为什么外部样式表会阻塞首次渲染，而内联脚本必须等待之前的 CSSOM 构建完成”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释渲染树依赖完整 CSSOM、脚本可能读取计算样式故须等待样式表这两条阻塞链。
围绕“CSS contain 属性的 layout、paint、size 等取值如何让浏览器缩小一次样式变更的重算范围”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 containment 告诉浏览器子树与外部互不影响从而限制回流/重绘边界，且 size 需给定尺寸的前提。
围绕“display:none、visibility:hidden、opacity:0 三种隐藏方式在布局、绘制、命中测试”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须逐维度对比是否占布局空间、是否参与绘制、是否响应事件、过渡动画可用性。
本题解析 document.readyState 的三种值与页面加载阶段的关系：loading 对应当前 HTML 解析未完成，interactive 对应 HTML 解析完成但子资源未完成，complete 对应所有子资源加载完成。并说明利用 readystatechange 替代 DOMContentLoaded 或 load 的用法。
本文解释 DOMContentLoaded 与 window.load 事件等待资源的区别，指出 DOMContentLoaded 不等待图片等子资源，load 事件才代表全部资源完成，并提供具体场景和边界。
围绕“@font-face 的 font-display 各取值如何控制字体加载期间的文本渲染，swap 与 option”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答要按阻塞期/交换期模型解释 auto、block、swap、fallback、optional 的行为差异。
围绕“什么是强制同步布局，在循环里交替写样式和读 offsetHeight 会造成什么后果、如何定位这类问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释循环读写使浏览器每轮被迫提前布局的开销特征，以及用 Performance 面板识别长 Layout 的思路。
围绕“以 60Hz 刷新为例，一次渲染帧的预算大约是多少，rAF 回调里的长任务为什么直接表现为掉帧”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须把刷新周期、回调耗时、后续布局绘制时间放进同一预算分析，并说明超出预算的表现。
围绕“getBoundingClientRect 与 offsetTop/offsetWidth 在参考系、小数精度和 t”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须对比视口坐标系与 offsetParent 坐标系、返回值是否含缩放变换、是否为整数。
围绕“页面里的 iframe 会怎样影响父页面 window load 事件的触发，嵌入慢第三方页面时有哪些隔离手段”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 iframe 子资源计入父页面 load 等待，并给出动态注入、lazy 属性等隔离思路。
围绕“img 标签的 loading=lazy 与 decoding=async 分别推迟什么工作，两者对首屏大图是否都合”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分网络加载延迟与解码移出主线程两件事，并指出首屏关键图不应 lazy 的边界。
围绕“IntersectionObserver 的 root、rootMargin、threshold 各控制什么，thr”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须讲清观察区域由 root 加 rootMargin 定义、回调按可见比例跨越阈值档位触发。
围绕“做元素可见性检测时，IntersectionObserver 相比 scroll 事件里调 getBoundingC”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须指出观测在浏览器合成/空闲侧异步回调、避免主线程每帧强制布局读取，且能跨 iframe 视口判定。
围绕“页面合成层过多会导致什么问题，排查层数量异常时应该看哪些信号”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明层数与纹理内存、栅格化耗时、层间合成开销的关系，并给出减少无意义提升的思路。
围绕“如何用 PerformanceLongTaskTiming 监测页面长任务，50ms 阈值是怎么来的、attribu”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出 PerformanceObserver 监听 longtask 的接入方式、阈值来源及归因只能到任务容器级别的限制。
围绕“MutationObserver 的回调是按每次 DOM 变更同步触发还是批量触发，这决定了它适合和不适合什么场景”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明变更记录以微任务批量投递、回调里能拿到 mutation 列表，从而得出不适合做逐次同步拦截的结论。
围绕“用 PerformanceNavigationTiming 能拆解出页面加载的哪些阶段，TTFB 偏长应看其中哪几个”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答要按时间轴解释 redirect、DNS、TCP、request/response、domInteractive 等字段并能定位 T。
围绕“OffscreenCanvas 解决了什么渲染瓶颈，把 canvas 绘制移进 Worker 需要满足什么前提”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明主线程渲染被 JS 阻塞时离屏 canvas 可独立绘制，以及 transferControlToOffscreen 后原 ca。
围绕“document.visibilityState 有哪几种取值，页面最小化与切到后台标签页分别进入哪个状态”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须准确列出 visible、hidden（及 prerender 的历史取值）并说明两者均触发 hidden。
围绕“beforeunload、unload、pagehide 三个事件在触发时机与可靠性上有什么区别，移动端为什么应优先”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分可取消的离开确认、卸载执行不可靠、页面隐藏含进入 bfcache 三种语义，并指出移动端常跳过 unload。
围绕“PerformancePaintTiming 提供的 first-paint 与 first-contentful-”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分任意像素首绘与首个内容（文本、图片、canvas）绘制，并能把 FCP 偏晚归因到渲染阻塞资源链上。
围绕“给 touchstart、wheel 监听加 passive:true 为什么能改善滚动流畅度，加上之后代码里不能再”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释浏览器无需等待监听器决定是否取消默认滚动即可立即合成滚动帧，以及 passive 下 preventDefault 无效。
解释浏览器预加载扫描器为何能在主解析器被同步脚本阻塞时提前请求 CSS、JS、图片：它是独立的推测扫描，只识别资源标签、不执行脚本，并说明其失效边界。
围绕“哪些 DOM 读写操作会触发回流，为什么把多次几何读取集中到写入之前能减少回流次数”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分触发布局的读取类 API 与样式写入，并给出读-写分离的批处理模式。
围绕“重绘和回流的触发条件与开销有何不同，为什么修改 color 通常比修改 width 便宜”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答要按流水线位置说明回流必经布局而重绘可跳过布局、合成类变更还可跳过绘制。
围绕“requestAnimationFrame 的回调相对一次渲染更新的布局、绘制步骤在什么时候执行，为什么适合在里面读”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须定位回调发生在样式与布局计算之前、与浏览器刷新率对齐，并解释同帧内读写不会丢中间帧。
围绕“requestIdleCallback 的回调在什么时机执行，deadline.timeRemaining 与 ti”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明浏览器在帧空闲期调度、回调须按剩余时间主动让出、timeout 保证兜底执行。
围绕“监听单个元素尺寸变化为什么要用 ResizeObserver 而不是 window 的 resize 事件，它的回调”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明元素尺寸可因布局变化而非窗口变化而改变、观察粒度到元素，并注意回调在布局后绘制前可能引发循环告警。
围绕“preload、prefetch、preconnect、dns-prefetch 四种资源提示分别影响加载流程的哪个”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答要按当前导航必需、未来导航可能需要、提前建连、仅 DNS 预解析区分四者，并说明 as 决定请求优先级与缓存匹配。
围绕“把一个大任务拆成多个小任务时，scheduler.yield 相比 setTimeout(0) 在恢复优先级上有什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 yield 后任务继续以接近原优先级排队的语义及其对长任务拆分响应性的意义。
本文深入解析普通、async、defer 三种 script 在下载时机、执行顺序及 DOMContentLoaded 触发上的差异，并通过具体场景和边界条件帮助判断选型。
围绕“setTimeout 嵌套调用超过一定层数后为什么最小延迟会变成 4ms，后台标签页中定时器还会被怎样节流”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明规范中嵌套层级的最小延迟钳制与后台页定时器降频（最低约 1 秒一次）两条独立规则。
围绕“为什么用 transform 和 opacity 做动画通常比修改 top/left 或 width 更流畅”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须落到三类属性分别触发布局、绘制、仅合成的流水线差异上。
围绕“View Transitions API 在 DOM 更新前后分别做了什么，为什么它能让状态切换变成平滑动画而不手写”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明浏览器捕获新旧状态快照、在回调内同步完成 DOM 更新、对两层快照做交叉过渡的机制。
围绕“实现十万条数据的虚拟列表，核心渲染策略是什么，固定行高与不定行高在实现难度上差在哪”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明只渲染可视区加缓冲项、用临时标记撑出滚动高度的核心机制，并对比不定高带来的测量与滚动定位问题。
围绕“基于 visibilitychange 事件，哪些类型的页面任务应该在页面隐藏时暂停或降级，为什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出暂停视频/动画、停止轮询、保存草稿等具体决策及对应资源理由，并说明 hidden 时 rAF 与定时器本就被节流。
围绕“VisualViewport API 与 window.innerWidth 衡量的视口有何不同，移动端弹出软键盘后”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分布局视口与 pinch 缩放/键盘遮挡后的可视视口，并说明用 resize/scroll 事件跟随可视区。
围绕“哪类计算适合移入 Web Worker，Worker 与主线程通信的 postMessage 结构化克隆会带来什么成”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出适用判定（CPU 密集、无需 DOM）并量化大数据拷贝成本、提到 Transferable 转移方案。
围绕“CSS will-change 应该什么时候声明、为什么长期挂在大量元素上反而会拖慢页面”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明它是给浏览器的优化提示、应在使用前临时添加用完移除，以及每层占用纹理内存的代价。
