分层渲染能减少重绘区域开销，是因为静态内容落在独立合成层后可跳过paint阶段，仅参与低成本composite；其生效需同时满足三个硬性条件：relative父容器、absolute子canvas且top/left为0、background透明，缺一则层塌陷。
为什么分层渲染能直接减少重绘区域开销
因为浏览器的 Composite 阶段代价远低于 Paint，而分层的本质是让静态部分（如地图底图、网格线）和动态部分（如玩家图标、实时路径）落在不同合成层（Compositing Layer）上。一旦底图不更新，它对应的图层就完全跳过 Paint，只参与最终合成——这直接绕过了 Canvas clearRect + drawImage + fillText 的整套重绘流程。
关键前提是：各层必须满足硬件加速触发条件，否则仍会退化为软件绘制，失去分层意义。
Canvas 分层的 DOM 与 CSS 必须满足的三个硬性条件
缺一不可，否则层会塌陷成单个 Canvas，所有优化归零：
-
position: relative容器必须存在，且所有canvas元素都作为其子元素 - 每个
canvas必须设position: absolute，且top/left均为0，确保像素级重叠 - 每个
canvas必须设background: transparent（或不设背景色），否则底层会被遮盖
常见错误：z-index 设错导致图层顺序颠倒；用 margin 或 transform 替代 top/left 造成布局偏移；父容器未设 overflow: hidden 导致滚动时层错位。
哪些内容该放哪一层？按更新频率分级策略
不是“越多层越好”，而是按变化频率聚类，避免跨层混合绘制：
-
底图层（
canvas-bg）：瓦片地图、坐标网格、静态标注——初始化绘制一次，后续永不调用ctx.clearRect() -
实体层（
canvas-entities）：玩家图标、载具、物品标记——每帧仅重绘移动对象所在矩形区域，用ctx.clearRect(x, y, w, h)精确擦除旧位置 -
UI 层（
canvas-ui）：血条、弹窗、雷达框——独立于地图坐标系，用绝对像素定位，可配合requestAnimationFrame单独控制刷新节奏
注意：若某类实体（如爆炸特效）生命周期极短但数量多，应单独切出“特效层”，避免污染实体层的重绘逻辑。
如何验证分层是否真正生效
仅靠视觉看不出，必须用 Chrome DevTools 的 Layers 面板确认：
- 打开
More Tools → Layers，缩放视图，检查是否出现多个独立图层，且名称含Canvas - 勾选
Paint flashing，交互时只有实体层闪烁，底图层完全静止——说明重绘区域已收缩 - 若某层显示
Software rasterized，说明未触发 GPU 加速，需检查是否漏加will-change: transform或transform: translateZ(0)
容易被忽略的是：Canvas 元素本身若设置了 width/height 属性（而非仅 CSS 尺寸），会导致每次重绘前强制清空整个缓冲区，彻底废掉局部重绘逻辑。
