阶段 5 · 进阶高级25 分钟
资源生命周期与性能：复用、批处理、异步完成
避免逐帧分配，理解 CPU/GPU 并行
复用管线、缓冲区和附件，测量命令编码开销，并用 onSubmittedWorkDone 理解提交完成点。
LEARNING GOALS
先明确本课目标
1
区分创建成本与提交成本
2
复用长寿命资源
3
谨慎使用 onSubmittedWorkDone
MENTAL MODEL · 再建立心智模型
CPU 可以继续编码后续帧，而 GPU 处理前一帧；性能来自保持流水线充满，而不是每帧等待 GPU。
MINIMAL EXAMPLE
什么时候可以安全复用或销毁 GPU 资源？
queue.submit() 返回时只代表命令已排队，不代表 GPU 已完成。资源应尽量跨帧复用；确需等待全部已提交工作时可用 onSubmittedWorkDone()，但频繁等待会让流水线串行化。
javascriptdevice.queue.submit([commands]);
// 只在确实需要 CPU 知道 GPU 完成时等待
await device.queue.onSubmittedWorkDone();
temporaryBuffer.destroy();- 创建放循环外 Pipeline、BindGroup 和长期 Buffer 通常不应每帧重建。
- 提交不等于完成 CPU 会继续向前，GPU 在自己的队列中执行。
- 等待要稀少 每帧 await 会消除 CPU/GPU 并行，是常见性能陷阱。
应用保留资源描述用于重建，复用稳定资源，只在读回或释放关键资源时等待。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
性能Resource LifetimeGPU 资源从创建、复用、最后使用到安全销毁的生命周期管理。性能onSubmittedWorkDone等待此前所有队列工作完成的粗粒度同步 Promise；频繁等待会串行化流水线。性能Pipeline Cache复用已经创建的 Pipeline，避免在渲染循环中重复编译与验证着色器和固定状态。性能Command Batching把相关命令组织进较少的 Pass 和 CommandBuffer，降低 CPU 编码、状态切换与提交开销。性能Frame Pacing控制每帧提交与展示节奏，使 CPU、GPU 和刷新率协同，减少卡顿、排队过深或不均匀帧时间。命令CPU运行 JavaScript、组织应用逻辑并编码 GPU 命令的通用处理器；它与 GPU 异步协作，不应在每一步强制等待。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
实现帧资源三缓冲，避免 CPU 覆盖 GPU 尚未读取的 uniform。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
热路径只做必要工作
管线、BindGroup、静态 Buffer 和附件通常可长期复用。帧循环主要更新少量数据、编码命令和提交。
不要每帧等待完成
onSubmittedWorkDone 是粗粒度同步工具，频繁 await 会串行化 CPU/GPU。用于截图、资源回收或明确同步点更合适。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
两者都需要复用热路径资源，但 WebGPU 的资源 usage 与提交完成点更显式。
WebGL
复用 Program、VAO、Buffer、Texture/FBO，避免逐帧创建和频繁状态抖动。
WebGPU
复用 Pipeline、BindGroup、Buffer、Texture，并用提交完成点管理安全回收。
WebGPU 显式不等于每帧重建描述对象；描述越稳定，越应缓存和复用。