用 visibility: hidden + pointer-events: none 替代 display: none 切换场景，可保留动画状态、布局占位和 DOM 结构，避免 canvas 上下文回收与音画不同步；需手动 cancelAnimationFrame 并暂停媒体。
用 display 切换场景会丢掉动画状态？别这么干
直接设 display: none 会让元素彻底脱离渲染流，requestAnimationFrame 回调里读不到它的尺寸，CSS 动画也会中断、重置。更糟的是，如果某个场景里用了 canvas 或 video，display: none 可能导致音频继续播放但画面冻结，或 canvas 上下文被浏览器回收。
推荐做法是用 visibility: hidden + pointer-events: none 组合：
-
visibility: hidden保留布局占位和 DOM 结构，动画帧仍可正常计算 -
pointer-events: none确保用户点不到隐藏场景，避免误触 - 若需彻底停掉逻辑，应在 JS 层手动
cancelAnimationFrame并暂停audio/video
transform: translateZ(0) 能让场景切换更顺？要看情况
加 transform: translateZ(0) 是为了触发 GPU 加速，但它不是万能的。对纯 CSS 动画（比如 opacity、transform）确实可能提升帧率；但若场景里有大量重排（reflow）操作——比如频繁修改 innerHTML 或读取 offsetHeight ——GPU 加速毫无帮助，反而增加内存开销。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只在真正做平移/缩放/旋转的容器上加
will-change: transform（比translateZ(0)更精准） - 切换前先
getComputedStyle(el).opacity强制同步布局，避免后续动画卡顿 - Chrome DevTools 的
Rendering > FPS Meter和Layers面板可验证是否真生成了独立合成层
多个 canvas 场景共存时，如何避免内存泄漏
每个 canvas 对应一个 WebGL 或 2D 上下文，不清理会持续占用显存。尤其在 SPA 中反复进入/退出场景，容易积累未释放的纹理、着色器、ImageBitmap。
关键清理步骤必须手动执行：
- 调用
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)清空画布 - 对 WebGL 上下文，调用
gl.deleteTexture、gl.deleteProgram等显式释放资源 - 移除所有绑定到该 canvas 的事件监听器（
canvas.removeEventListener） - 将 canvas 的
width和height设为0，强制清空内部缓冲区
function destroyCanvas(canvas) {
const ctx = canvas.getContext('2d');
if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = 0;
canvas.height = 0;
// 若使用了 WebGL，此处还需调用 gl.deleteXXX
}
用 URLSearchParams 管理场景路由，比 class 切换更可靠
靠给 body 加 class="scene-home" 或维护全局变量来判断当前场景，容易在异步加载、后退/前进、分享链接等场景下失步。HTML5 History API + URLSearchParams 是更健壮的选择。
例如把场景名存在 query 参数中：?scene=game&level=3，然后监听 popstate：
window.addEventListener('popstate', (e) => {
const params = new URLSearchParams(location.search);
const scene = params.get('scene') || 'home';
switchScene(scene);
});
这样不仅支持浏览器前进/后退，还能直接复制链接分享到指定场景，且服务端可识别（利于 SSR 或 SEO）。注意：不要用 hash，因为 hashchange 在 iOS Safari 中有延迟，且无法被搜索引擎索引。
复杂点在于，动画过渡期间用户点返回键，要确保 switchScene 不重复触发、不打断当前动画——得加个 isTransitioning 标志位，或用 Promise 链控住流程。
