用 requestAnimationFrame 驱动 Canvas 动画时，组件隐藏或卸载要取消什么避免幽灵绘制？
围绕“用 requestAnimationFrame 驱动 Canvas 动画时，组件隐藏或卸载要取消什么避免幽灵绘制”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确句柄保存、标签页可见性与最后一帧状态提交。
核心关键词Canvas requestAnimationFrame cancelAnimationFrame 清理
面试知识索引 · 分类、标签与搜索
浏览器 · 动画面试题，11 道完整答案
浏览器 · 动画面试题第 1 页，显示第 1–11 题，共找到 11 道完整解析，可继续按分类、标签与关键词缩小范围。
11筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
Canvas 在高 DPR 屏幕上模糊时，应该怎样按 devicePixelRatio 设置尺寸与变换？
本文解释 Canvas 高 DPR 屏幕模糊的机制：CSS 像素与位图像素分离；给出标准设置方法，强调 ctx.setTransform 复位避免变换叠加，并讨论 resize 与动画中的边界。
核心关键词Canvas devicePixelRatio 模糊 高清屏 - 0003
display:none、visibility:hidden、opacity:0 三种隐藏方式在布局、绘制、命中测试和可访问性上各有什么差异？
围绕“display:none、visibility:hidden、opacity:0 三种隐藏方式在布局、绘制、命中测试”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须逐维度对比是否占布局空间、是否参与绘制、是否响应事件、过渡动画可用性。
核心关键词display none visibility hidden opacity 0 区别 - 0004
requestAnimationFrame 的回调相对一次渲染更新的布局、绘制步骤在什么时候执行，为什么适合在里面读写 DOM？
围绕“requestAnimationFrame 的回调相对一次渲染更新的布局、绘制步骤在什么时候执行，为什么适合在里面读”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须定位回调发生在样式与布局计算之前、与浏览器刷新率对齐，并解释同帧内读写不会丢中间帧。
核心关键词requestAnimationFrame 回调时机 渲染帧 - 0005
为什么用 transform 和 opacity 做动画通常比修改 top/left 或 width 更流畅？
围绕“为什么用 transform 和 opacity 做动画通常比修改 top/left 或 width 更流畅”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须落到三类属性分别触发布局、绘制、仅合成的流水线差异上。
核心关键词transform opacity 动画 合成线程 性能 - 0006
View Transitions API 在 DOM 更新前后分别做了什么，为什么它能让状态切换变成平滑动画而不手写关键帧？
围绕“View Transitions API 在 DOM 更新前后分别做了什么，为什么它能让状态切换变成平滑动画而不手写”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明浏览器捕获新旧状态快照、在回调内同步完成 DOM 更新、对两层快照做交叉过渡的机制。
核心关键词View Transitions API startViewTransition 过渡动画 - 0007
基于 visibilitychange 事件，哪些类型的页面任务应该在页面隐藏时暂停或降级，为什么？
围绕“基于 visibilitychange 事件，哪些类型的页面任务应该在页面隐藏时暂停或降级，为什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出暂停视频/动画、停止轮询、保存草稿等具体决策及对应资源理由，并说明 hidden 时 rAF 与定时器本就被节流。
核心关键词visibilitychange 暂停视频 轮询 草稿保存 - 0008
创建一个专用 Worker 时，它的全局作用域和主线程有什么不同？
本题解释 DedicatedWorkerGlobalScope 与 window 的关键差异：self 指向该作用域而非 window，postMessage 专门向父线程通信，close 终止 Worker。同时提及 DOM 缺失、requestAnimationFrame 可用等边界。
核心关键词DedicatedWorkerGlobalScope 全局作用域差异 - 0009
Worker 中支持 setTimeout 和 setInterval 吗？它们与主线程有何异同？
围绕“Worker 中支持 setTimeout 和 setInterval 吗？它们与主线程有何异同”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕同样支持，但不涉及 requestAnimationFrame。
核心关键词Worker setTimeout setInterval 支持 - 0010
如何用 preventDefault 阻止滚轮事件引发的页面滚动，但保留自定义滚轮行为？需要注意什么？
本文解释如何用 preventDefault 阻止滚轮引起的页面滚动，同时保留自定义行为；重点说明 passive 选项的影响、滚动动画管理、负滚动链及 wheel 事件可取消性的注意事项。
核心关键词wheel 事件 preventDefault 自定义滚动 - 0011
scroll 事件触发非常频繁，如何有效地控制处理频率？请对比 rAF、timeout 和 passive 的配合。
围绕“scroll 事件触发非常频繁，如何有效地控制处理频率？请对比 rAF、timeout 和 passive 的配合”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须比较 rAF 与防抖节流在滚动中的差异，以及 passive 保证不被阻塞。
核心关键词scroll 事件节流 requestAnimationFrame