超大工作流前端救星！ComfyUI-NodeSnapshots：用位图缓存将大型工作流帧率从 20 FPS 提升至 60+

ComfyUI-NodeSnapshots 是由 Sparknight 开发的实验性前端扩展，旨在解决大型工作流在平移、缩放时帧率骤降的问题。其核心机制是将静态节点与链接替换为预渲染的位图图像，仅在用户直接交互（悬停、编辑、执行）时恢复实时绘制。在一个约 350 节点的测试工作流中，繁忙区域平均帧率从 20 FPS 提升至约 60 FPS，主线程绘制时间从 42.6ms 降至 8.6ms。

• GitHub：https://github.com/SparknightLLC/ComfyUI-NodeSnapshots

该扩展同时支持 Legacy 渲染器与实验性的 Nodes 2.0，无需修改推理节点、Python 依赖或工作流格式。安装方式为将文件夹放入 ComfyUI/custom_nodes/ComfyUI-NodeSnapshots，重启后于 Settings > NodeSnapshots 启用。需注意：其他替换相同绘制方法的扩展可能与其冲突。

技术原理：空闲捕获 + LRU 内存管理

NodeSnapshots 并非对整个画布截图，而是采用小批量空闲捕获策略：

• Legacy 模式：可见节点在空闲时段逐个渲染到透明画布，平移/缩放/拖拽时复用图像。位置、视口缩放、子图切换不触发失效；仅当节点值、大小、连接或绘制设置变更时才重新捕获。检查频率在交互期间限制为每 100ms 一次，避免每帧开销。
• Nodes 2.0 模式：克隆 DOM 元素及计算样式，嵌入同源字体生成 SVG 再光栅化。原始 Vue 组件保持挂载，悬停/聚焦/执行时显示实时内容。此模式捕获较慢（需样式读取、序列化、解码），且预热期较长（密集视图约 22 秒，全图视图 45 秒上限内仍有约 100/344 节点未捕获）。
• 链接快照：独立缓存当前视口+可配置 overscan（默认 512px）的透明图像，长链接自动裁剪。平移停止 180ms 后恢复原生绘制以保证清晰度。链接层使用单独合成层，平移仅更新 CSS transform，避免重绘。
• 内存管理：节点与链接分别设定位图预算（默认 256MiB / 32MiB），采用 LRU 淘汰。无磁盘缓存，所有图像驻留内存。Precache offscreen nodes 可选启用离屏预捕获，但会强制临时渲染增加后台负载。

关键设计取舍：

• 运行提示期间默认保留快照（平移仍流畅），Release images while executing 可改为释放图像换取内存。
• 慢速或失败捕获的节点永久保持实时，可手动加入排除列表。
• 相机标记（调试用）烘焙入图像本身，无额外绘制开销。
• content-visibility: auto 优化离屏节点，但 Vue 响应性与 JS 仍持续运行，非万能加速。

性能实测：Legacy 收益显著，Nodes 2.0 仍处实验阶段

基准测试环境：i9-10900K + RTX 3090 + 64GB RAM，ComfyUI 0.34.0 / 前端 1.55.9，344 节点/320 链接工作流，VRAM 被 Krea2 检查点占用（保守估计）。

结论：

• Legacy 模式：密集与全图视图均实现 3–4.5 倍帧率提升，绘制时间下降 80%+，缓存命中率 >85%。
• Nodes 2.0 模式：密集视图无稳定收益（首次启用甚至更慢），全图视图仅小幅改善；主要收益体现在绘制时间降低，但因预热未完成导致帧率波动大。DOM 捕获失效频繁，亚像素尺寸变化是已知瓶颈。
• 通用注意：结果高度依赖工作流密度与重叠度；简单图收益有限。测量前务必让缓存充分预热。

配置要点与局限性

关键设置建议：

• Bitmap memory budget：根据显存/内存调整，过大可能导致 GPU 合成压力。
• Capture pixel ratio：默认 2，降低至 0.5–0.75 可减小图像体积但牺牲文本清晰度。
• Idle refresh interval：设为 0 禁用周期性刷新，避免长交互中残留动画干扰。
• Excluded node types：自定义绘制或有副作用的节点应加入排除列表。
• Reduce shadows during navigation：Nodes 2.0 平移卡顿时可开启，临时移除投影。

明确局限：

• 不支持媒体/画布内容、Shadow DOM、伪元素、动画、滚动控件、外部样式资源。
• Nodes 2.0 自定义小组件兼容性不保证，需手动排除。
• 组容器始终实时绘制（成本低），不被缓存。
• 浏览器合成器内存、字体资源、解码器内存不计入位图预算。
• 导出上下文或不支持画布布局时回退到普通位图绘制。
• 实验性代码，不承诺所有工作流提速；验证基于前端 1.55.9，新版可能失效。

诊断工具：

NodeSnapshots.getStats()   // 查看命中、字节、捕获耗时、失效原因等
NodeSnapshots.clearCache() // 手动清空缓存

单元测试与 Playwright 浏览器测试覆盖缓存、调度、签名、链接层等，但非生产 FPS 基准。

NodeSnapshots 代表了 ComfyUI 前端优化的务实路径：不重构渲染管线，而是在现有架构上智能降级。对 Legacy 用户而言，它是目前最有效的流畅度解决方案；对 Nodes 2.0 用户，则需耐心等待上游 DOM 稳定性改进。使用前请备份工作流，并在真实环境中验证收益——毕竟，没有任何优化能替代对自身工作流特征的清醒认知。