WebGL卡顿主因是draw calls过多和帧间状态频繁切换，应合批渲染、缓存绑定状态、禁用冗余渲染功能；Three.js需关闭自动更新、慎用PBR材质；Canvas混排避免alpha和亚像素变换；低端设备优先用压缩纹理和FBO复用。
WebGL 渲染卡顿？先查 draw calls 和帧间状态切换
多数“3D 页面卡”不是模型太复杂，而是 WebGL 调用太碎、状态反复切换。浏览器每次执行 gl.drawElements() 或 gl.drawArrays() 都要校验当前绑定的着色器、VAO、纹理、混合模式等——哪怕只改了一个 gl.uniform1f()，也可能打断 GPU 流水线。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
WebGL Inspector或 Chrome DevTools 的 “Rendering” 面板开启 “FPS meter” 和 “Paint flashing”，确认是否真卡在 GPU（而非 JS 主线程） - 合并可共用材质的网格：把 50 个单面片（plane）+ 同一贴图 + 同一 shader 的物体，合批成 1 个 VAO + 1 次
gl.drawElements() - 避免每帧调用
gl.bindTexture()或gl.useProgram()—— 先比对当前绑定状态，仅在必要时切换 - 禁用未使用的渲染状态：如不需要深度测试就关掉
gl.disable(gl.DEPTH_TEST)，省去硬件判断开销
Three.js 项目里哪些默认行为会悄悄拖慢 WebGL？
Three.js 抽象层很友好，但默认开启的特性常被忽略：自动计算法线、实时更新 boundingSphere、每帧重算 matrixWorld……这些在静态场景里纯属浪费。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 静态模型设
mesh.frustumCulled = false并手动控制可见性，避免每帧跑boundingSphere.containsPoint() - 关闭自动矩阵更新：
mesh.matrixAutoUpdate = false，改用手动mesh.updateMatrix()（尤其适合 UI 固定位置的 3D 元素） - 纹理加载后立即调用
texture.needsUpdate = true，别依赖 Three.js 自动检测（它会在每帧遍历所有纹理） - 慎用
MeshStandardMaterial：PBR 计算开销大，简单场景优先用MeshBasicMaterial或MeshLambertMaterial
HTML 层叠与 WebGL Canvas 混合时的合成陷阱
把 <canvas id="webgl-canvas"> 和 DOM 元素混排时，浏览器可能被迫启用“离屏合成”（offscreen compositing），尤其当 canvas 启用了 alpha: true 或叠加了 CSS transform/opacity。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若背景恒定且不透明，创建上下文时传
{ alpha: false }，让 canvas 参与主合成层，避免额外 Alpha 混合通道 - 避免给 canvas 加
transform: scale(0.99)这类亚像素变换——会触发软件光栅化，GPU 直接降级 - DOM 遮罩层（如 loading 提示）尽量用
position: fixed+pointer-events: none，而非盖在 canvas 上靠 z-index 堆叠 - 调试时临时加
canvas.style.will-change = 'transform'可能加速，但上线前务必移除——它会让浏览器提前分配合成层，反而增加内存压力
低端设备上 WebGL 纹理和帧缓冲怎么保底线？
Android 中低端机或旧 iPad 的 GPU 内存紧张，gl.texImage2D() 分配大纹理、或频繁创建 gl.framebuffer 容易触发回收甚至崩溃，错误常表现为黑屏或 gl.getError() === gl.OUT_OF_MEMORY。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纹理尺寸强制为 2 的幂（POT）：即使 WebGL2 支持 NPOT，部分 Mali GPU 仍要求 POT 才能压缩（ETC2/ASTC）
- 用
gl.getExtension('WEBGL_compressed_texture_etc')检测并加载 ETC2 贴图，体积比 PNG 小 4–6 倍，解压由 GPU 硬件完成 - FBO（帧缓冲）复用：不要每帧
gl.createFramebuffer()+gl.deleteFramebuffer()，建一个池子，bind前 clear 即可 - 动态降质：监听
gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE)或gl.getParameter(gl.MAX_TEXTURE_SIZE)，低于 2048 就切低模+小贴图
真正难的不是写渲染逻辑，而是让每一帧都避开驱动层的隐式同步点。很多“优化技巧”本质是帮 GPU 少做一次猜测——它不擅长猜你下一步要不要用那张纹理，所以你得明说。
