网页游戏中的“静态层”与“动态层”是开发者手动划分的渲染优化策略，非浏览器自动分层机制；staticCanvas仅初始化绘制一次，dynamicCanvas每帧重绘，二者尺寸须严格一致以避免错位。
网页游戏中没有“分层合成”这个标准术语，所谓动态层与静态层分离，本质是前端渲染优化中对 Canvas 或 DOM 节点层级的显式划分，目的是减少重绘区域、避免不必要的状态切换和 GPU 提交。它不是浏览器或引擎内置的合成机制，而是开发者主动组织渲染逻辑的结果。
为什么不能依赖浏览器自动分层
现代浏览器确实会为某些 DOM 元素（如含 transform、opacity 的元素）创建独立图层（compositing layer），但这种分层是启发式且不可控的：
- 触发条件复杂：需满足特定 CSS 属性组合 + 非平凡 transform + 无 overlap 等隐式约束
- 图层数量无上限时反而增加内存与合成开销（尤其在低端 Android 设备上）
- Canvas 内部绘制完全不参与浏览器图层系统，所有绘制都在一个位图上下文中完成
所以游戏里谈“静态层”，实际是指：将不变或极少变化的内容（如 UI 背景、地图底图、技能特效贴图）预先绘制到固定 Canvas 或离屏 canvas 中，后续每帧仅复用该位图；而“动态层”则指每帧都需重绘的可变内容（角色位置、血条数值、粒子位移）。
Canvas 双层结构实操：staticCanvas + dynamicCanvas
最轻量、兼容性最好的方案是手动维护两个 canvas 元素，叠放在同一容器内：
-
staticCanvas：只在初始化或资源变更时调用一次ctx.drawImage()或ctx.fillText()，之后不再清空或重绘 -
dynamicCanvas：每帧调用ctx.clearRect()后重绘所有动态对象，z-index或 DOM 顺序确保它盖在 staticCanvas 上方 - 两者尺寸必须严格一致，否则会出现错位或裁剪；建议统一由 JS 控制
canvas.width/height，而非仅靠 CSS 缩放
示例关键代码：
const staticCtx = staticCanvas.getContext('2d');
const dynamicCtx = dynamicCanvas.getContext('2d');
// 初始化静态层（只执行一次）
staticCtx.drawImage(backgroundImage, 0, 0);
staticCtx.font = '16px Arial';
staticCtx.fillText('HP:', 10, 20);
// 每帧动态层
function renderFrame() {
dynamicCtx.clearRect(0, 0, width, height);
dynamicCtx.drawImage(playerSprite, playerX, playerY);
dynamicCtx.fillText(`${hp}/${maxHp}`, 50, 20);
}
WebGL 游戏中的等效做法：静态 VAO + 动态 uniform 更新
若用 WebGL（如 Three.js 或原生），“静态层”对应的是不随帧变化的几何体与材质（如场景网格、UI 图集），而“动态层”是频繁更新的顶点属性或 uniform（如角色骨骼矩阵、血条宽度）：
- 静态资源应使用
gl.STATIC_DRAW创建 buffer，并复用同一VAO；避免每帧绑定/解绑 - 动态数据优先走 uniform（如
u_playerPos）或 instanced rendering，而非重写整个顶点 buffer - 不要把 UI 和 3D 场景混在同一 WebGL 上下文里渲染——UI 用 2D canvas 或 CSS overlay 更稳
Three.js 中典型误操作：mesh.position.set(x, y, z) 每帧调用本身没问题，但若同时每帧修改 mesh.geometry.verticesNeedUpdate = true，就等于把静态几何当动态用了，性能断崖下跌。
容易被忽略的边界情况
真正卡住项目的往往不是主干逻辑，而是这些细节：
- Canvas 像素比（
window.devicePixelRatio）未同步：staticCanvas 和 dynamicCanvas 的 backing store 尺寸不一致，导致模糊或拉伸 - 静态层含文字时未预乘 alpha：若字体用了
ctx.globalCompositeOperation = 'lighter'或叠加阴影，后续动态层绘制可能颜色异常 - Canvas 使用了
will-change: transform但未配contain: paint，浏览器仍可能因 layout 波动强制重合成整层
最稳妥的做法，是把“静态”定义为「整个游戏生命周期内不会重绘」，而不是「一局游戏内不变」——后者在热更、换肤、分辨率切换时极易漏处理，反而更难维护。
