离屏渲染是用缓存换时间，将稳定图层预先绘至不可见canvas，后续仅复制图像。它不插入DOM但具完整2D上下文，适用于静态UI、预合成图元等低频更新高成本场景，需注意更新时机、像素比适配与缓存粒度。

Canvas离屏渲染不是“多画一次”，而是用缓存换时间——把频繁重绘但内容稳定的图层提前画到一个不可见的<canvas></canvas>上，后续只需复制这个缓存图像，大幅减少CPU计算和GPU上传开销。

什么是离屏Canvas

离屏Canvas指不直接插入DOM、仅用于绘图操作的<canvas></canvas>元素。它没有渲染输出，但具备完整2D上下文能力，可执行drawImage、fillRect、路径绘制等所有操作。

• 创建方式简单：const offscreen = document.createElement('canvas');
• 尺寸需明确设置（不能依赖CSS）：offscreen.width = 1024; offscreen.height = 768;
• 获取上下文与普通Canvas一致：const ctx = offscreen.getContext('2d');

适合用离屏渲染的典型场景

核心判断标准：某部分内容更新频率远低于整体帧率，且自身绘制成本高。

• 静态UI层：游戏中的血条背景、HUD面板、地图边框等不变或极少变的装饰元素
• 预合成图元：带阴影/渐变/多图层的文字按钮、图标组合、粒子发射器模板
• 缩放/旋转频繁但内容固定的对象：如旋转的齿轮贴图、缩放的地图瓦片底图
• 多对象共用同一外观：上百个相同装备图标，先画一次到离屏Canvas，再批量drawImage

关键实现技巧与避坑点

离屏Canvas性能收益取决于是否真正减少了重复计算，而非盲目套用。

立即学习“前端免费学习笔记（深入）”；

• 避免在每帧都重绘离屏Canvas：只在其内容实际变化时才更新，例如监听配置变更、资源加载完成事件
• 注意像素比适配：高DPI设备下，若主Canvas用window.devicePixelRatio缩放，离屏Canvas也需同比例设置宽高，否则出现模糊或裁剪
• 合理控制缓存粒度：不要把整屏都塞进一个离屏Canvas——拆分为多个逻辑图层（如“背景层”“角色层”“特效层”），按需更新
• 内存不是无限的：每个离屏Canvas占用独立显存/CPU内存，大量高分辨率离屏Canvas可能引发OOM，建议结合canvas.toDataURL()调试内存占用

对比：直接绘制 vs 离屏+drawImage

以绘制一个含5个圆角矩形+3段文字+2个图标组成的UI面板为例（60fps）：

• 直接绘制：每帧调用约15+次2D API，涉及路径生成、文本度量、图像解码、混合计算，CPU耗时约3.2ms
• 离屏方案：首次绘制耗时4.1ms（含全部计算），后续每帧仅1次ctx.drawImage(offscreen, x, y)，耗时稳定在0.3ms以内
• 实测Chrome中，10个同类面板叠加时，帧率从42fps提升至59fps，卡顿明显减少