性能与可观测

GPU 热路径上的成本几乎都不是「API 名字慢」，而是 draw call 数量 × 状态切换 × CPU–GPU 同步点。先合批、禁热路径读回，再谈 timer query。Canvas 2D 的同步光栅陷阱见 绘制性能陷阱；SVG 是节点数，见 DOM 成本。换 GL 之后，主线程省下的 layout 会变成 drawElements 次数。

文档清单

文档	解决的问题
绘制调用与合批	draw call、状态切换、合批、实例化；timer query 谨慎
读回与同步陷阱	readPixels flush、mapAsync、1px 拾取、禁止 toDataURL

测量原则

Chrome：Performance 看 Main；about:tracing / GPU 过程看提交。console.time 包不住 GPU 执行。EXT_disjoint_timer_query_webgl2 能读 GPU 时间，但会插入气泡、结果可 disjoint，不要当帧节奏器。WebGPU timestamp-query 同样是可选 feature，先探测。

成本分层

1. 同步点： readPixels、getBufferSubData、mapAsync 立刻 await、toDataURL、热路径 getError。
2. Draw call 与 bind： 每物体 useProgram + bindVertexArray + 多张纹理。
3. 上传： 每帧 texImage2D / bufferData 整包。
4. 过绘与带宽： 全屏 pass、未封顶 DPR、MSAA。

对象过万先实例化，不要先上四叉树——CPU 剔除 2k AABB 通常不是瓶颈，1 万次 drawArrays 才是。