并发运行WebGL动画时TensorFlowJS推理变慢的原因及解决方案

你之前推测的“TFJS会话缓存被重置”是性能异常的直接表现，但触发逻辑并不是TFJS主动清空缓存，根因来自WebGL的底层调度规则：

• WebGL上下文的低优先级回收机制：浏览器的GPU调度器对所有WebGL上下文有固定优先级判定规则，主线程直接绑定到可见画布的FabricJS动画上下文，属于最高优先级的渲染任务；而Web Worker中创建的TFJS WebGL后端上下文，因为没有直接关联页面可见区域，会被判定为低优先级后台任务。当两个上下文持续运行、总显存占用达到浏览器设定的回收阈值时，低优先级的Worker上下文会被强制触发webglcontextlost事件。上下文丢失后，TFJS内部维护的着色器编译缓存、模型权重纹理池、中间激活值显存缓存会全部失效，等下次推理需要恢复上下文时，需要重新完成GPU上下文创建、全量着色器编译、模型权重重新上传到显存的全流程，这正是单次推理耗时从50ms跃升到7000ms量级的核心来源。
• GPU指令队列的串行抢占：浏览器的GPU进程会用统一的指令队列处理所有渲染任务，当主线程FabricJS的动画以16ms每帧的节奏持续提交绘制指令时，Worker中提交的TFJS推理指令会被频繁插入的高优先级主线程任务打断，即使没有触发上下文回收，也会因为队列排队、GPU状态来回切换拉长单次推理的实际耗时。
• 同进程的显存资源竞争：Web Worker中的WebGL上下文和主线程的WebGL上下文共享同一个渲染进程的显存配额，两个场景都持续申请显存资源时，会触发GPU显存的频繁换出、换入操作，进一步放大推理任务的延迟。

• 调整WebGL上下文的优先级绑定，降低被回收的概率：
  • 创建FabricJS的WebGL渲染上下文时，显式配置powerPreference: "low-power"，主动降低动画渲染的GPU资源优先级，把更高的GPU配额留给Worker中的推理任务。
  • TFJS初始化WebGL后端时，开启webgl_preserveDrawingBuffer: true配置，同时自定义绑定独立的WebGL2上下文，避免浏览器的默认上下文池自动回收这个Worker内的上下文。
• 错峰调度GPU任务，减少资源抢占：
  • 把FabricJS的动画绘制间隔从默认的16ms调整到32ms，和TFJS每64ms一次的推理节奏错峰，主动给GPU队列留出推理指令的调度窗口，避免持续的队列抢占。
  • TFJS侧在Worker初始化阶段一次性完成所有模型权重的显存上传，推理过程中不要主动释放权重对应的显存纹理，减少上下文恢复时的重复数据上传开销。
• 从根源规避GPU资源竞争：
  • 对于单帧50ms级别的推理负载，可以将TFJS后端切换为开启SIMD加速的WASM后端，这类后端运行在CPU侧，完全不会和主线程的WebGL动画产生GPU资源抢占，性能水平可以接近WebGL后端，且不存在上下文丢失带来的秒级延迟。
  • 对FabricJS的动画渲染做降采样，将渲染分辨率从设备原生像素比下调0.5，减少动画本身的显存占用，从总量上降低两个WebGL上下文的总显存压力，减少浏览器触发上下文回收的概率。

内容的提问来源于stack exchange，提问作者jxmorris12