离屏渲染是用内存换时间，将低频更新的高成本内容预绘制缓存，主画布仅贴图和局部更新；适用于静态UI层、预合成图元、频繁变换但内容固定的对象及大量同外观元素，需按更新节奏分层缓存并注意像素比适配、避免全屏缓存、关闭图像平滑及监控内存。

离屏渲染不是“多画一次”，而是用内存换时间——把稳定不变或低频更新的内容提前画好存起来，主画布只负责快速贴图和局部更新。对动画来说，它能显著减少每帧的重复计算，尤其在粒子、UI面板、Lottie动画等场景中，帧率提升明显、卡顿大幅缓解。

适合用离屏渲染的动画场景

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

• 静态UI层：如HUD面板、地图边框、按钮背景（含阴影/渐变），几乎不随动画变化
• 预合成图元：带图标+文字+圆角的节点模板、装备图标、粒子发射器底图
• 缩放/旋转频繁但内容固定的对象：比如旋转齿轮贴图、缩放地图瓦片底图
• 大量同外观元素：上百个相同风格的粒子、节点、小图标，先画一次再批量复用

分层缓存：按更新节奏拆解图层

数万个节点或数百个动画元素里，真正每帧都变的往往只有几十个。其余可归为逻辑图层，各自独立缓存：

• 背景层：网格线、坐标轴、底色，建一个大尺寸离屏Canvas一次性绘制
• 模板层：统一样式的节点/图标，预绘到小Canvas（建议≤256×256），复用drawImage
• 连接线层：固定拓扑的连线路径缓存为路径对象或小离屏Canvas，仅增删边时重绘
• 动态层：拖拽中节点、闪烁高亮、实时拖影等，由主Canvas每帧绘制

关键实现细节与避坑点

收益来自“少画”，而非“多画”。必须注意几个实操要点：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

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

• 只在真正变化时重绘离屏内容：监听主题切换、新增节点类型、缩放级别突变等事件触发重建
• 像素比适配不能漏：高DPI设备下，offscreen.width/height需乘以devicePixelRatio，否则模糊或裁剪
• 避免全屏一张离屏Canvas：内存暴涨、缩放失真、更新僵化；应按集群或功能块拆分
• 关闭图像平滑：ctx.imageSmoothingEnabled = false，尤其对线条、图标类图形更清晰
• 监控内存占用：定期用offscreen.toDataURL().length估算，总量超20MB时启动LRU清理

对比效果：真实性能差距

以绘制10个含圆角矩形+文字+图标的UI面板为例（60fps）：

• 直接绘制：每帧调用约15+次2D API，CPU耗时约3.2ms，叠加后帧率跌至42fps
• 离屏方案：首次绘制耗时略高（4.1ms），后续每帧仅1次drawImage，稳定在0.3ms以内，帧率回升至59fps

不复杂但容易忽略