1. 3D网页性能全景：为什么性能重要、性能瓶颈分析、性能指标
大家好，我是你们的老朋友。今天咱们正式开篇，聊聊3D网页性能的全景图。
说实话，我见过太多开发者，模型建得漂亮，动画做得炫酷，结果一上线，用户打开页面卡成PPT。嗯，这其实不是技术问题，是性能意识没跟上。我个人习惯，在项目启动前，先问自己三个问题：这玩意儿跑得动吗？瓶颈在哪？我怎么衡量？
1.1 为什么性能如此重要？
你想想看，用户打开一个3D网页，第一印象是什么？不是模型多精致，而是「滑不滑」。我曾在项目中遇到过，一个珠宝展示页面，模型精度极高，但帧率只有15FPS。用户反馈说「像在看幻灯片」。后来我们砍掉了30%的顶点数，帧率提到50FPS，转化率反而涨了20%。
说白了，性能就是用户体验的底线。3D网页不同于传统2D页面，它每帧都要重新计算几何、纹理、光照。一旦掉帧，用户会立刻感知到「卡」。更严重的是，移动端设备功耗有限，帧率低意味着发热、掉电快，用户可能直接关掉页面。
核心观点： 性能优化不是「锦上添花」，而是「雪中送炭」。一个卡顿的3D页面，再好的内容也白搭。
1.2 性能瓶颈分析：到底卡在哪？
很多新手一上来就怀疑「是不是代码写得烂？」其实不然。3D渲染的瓶颈通常集中在三个层面：CPU、GPU、内存。我建议你按这个顺序排查。
1.2.1 CPU瓶颈
CPU主要负责逻辑计算、动画更新、提交绘制命令。如果CPU负载过高，通常是因为：
- Draw Call过多： 每帧提交的绘制指令太多。我见过一个场景，每个小物件单独一个Mesh，Draw Call飙到2000+。解决办法是合并几何体、使用实例化渲染。
- JavaScript逻辑过重： 比如每帧都做复杂的物理计算或碰撞检测。我曾经接手一个项目，每帧都在遍历5000个粒子的位置更新，改成GPU计算后，CPU占用从80%降到15%。
- 动画系统低效： 骨骼动画的矩阵更新如果放在CPU上，很容易成为瓶颈。
1.2.2 GPU瓶颈
GPU负责光栅化、着色器执行、纹理采样。GPU卡顿的典型表现是：帧率低，但CPU占用不高。常见原因：
- 像素填充率不足： 屏幕分辨率高，或者有大量半透明叠加。我记得有一次，一个全屏粒子效果，每个粒子都带模糊，结果GPU直接拉满。
- 着色器过于复杂： 尤其是片元着色器里做了太多数学运算或纹理采样。我建议把复杂计算挪到顶点着色器，或者预计算。
- 纹理带宽瓶颈： 纹理太大、格式不对，导致GPU显存带宽吃紧。比如用RGBA32的纹理存法线贴图，其实用BC5压缩格式能省一半带宽。
1.2.3 内存瓶颈
内存问题往往被忽视，但它会引发「间歇性卡顿」。比如：
- 纹理内存爆炸： 加载了太多高分辨率纹理，导致显存溢出，系统开始用内存交换，瞬间卡死。
- JavaScript堆内存泄漏： 创建了对象不释放，GC（垃圾回收）触发时，主线程暂停几十毫秒。嗯，这很致命。
我的排查习惯： 先用Chrome DevTools的Performance面板录一段，看帧时间线。如果主线程任务密集，是CPU问题；如果GPU占用高，是GPU问题；如果内存曲线持续上升，是内存泄漏。
1.3 性能指标：用数据说话
光靠感觉不行，得量化。我常用的三个核心指标：FPS、帧时间、内存占用。下面这张表可以帮你快速理解：
| 指标 | 含义 | 理想值 | 危险值 |
|---|---|---|---|
| FPS | 每秒渲染帧数 | ≥60 | <30 |
| 帧时间 | 每帧渲染耗时（ms） | ≤16.67ms | >33ms |
| 内存占用 | 页面总内存（MB） | 稳定，不持续增长 | 持续上升或超过500MB |
1.3.1 FPS：最直观的「体检报告」
FPS低于30，用户会明显感到卡顿。但注意，FPS不是越高越好。我见过有人为了跑满120FPS，把画质降到最低，结果用户说「这画面还不如十年前的游戏」。其实，稳定60FPS就是很好的目标。移动端可以放宽到30FPS。
1.3.2 帧时间：比FPS更精准
FPS是平均值，帧时间能看出「卡顿的瞬间」。比如FPS显示60，但帧时间曲线里突然出现一个200ms的尖峰——那就是一次卡顿。我建议用requestAnimationFrame的回调时间戳来计算帧时间，或者直接用Stats.js库。
注意： 不要只看平均帧时间。要看P99（99%的帧时间）和最大帧时间。我曾经优化过一个项目，平均帧时间12ms，但最大帧时间达到150ms，用户反馈「偶尔会卡一下」。后来发现是纹理流送导致的。
1.3.3 内存占用：隐形杀手
内存占用持续增长，基本就是泄漏。我习惯在开发时打开Chrome的Memory面板，拍快照对比。如果发现纹理对象或几何体对象数量只增不减，那就要排查了。另外，注意纹理的GPU内存占用，可以用gl.getParameter(gl.TEXTURE_MEMORY_AMD)（如果支持）来查看。
1.4 实战小贴士：如何开始性能调优？
嗯，这里我分享一个我自己的流程：
- 先定目标： 比如「在iPhone 12上稳定60FPS」。没有目标，优化就是瞎忙。
- 用工具量化： 打开Chrome DevTools的Performance、Memory、Layers面板。或者用Three.js的Stats.js、WebGL Inspector。
- 找瓶颈： 看帧时间线，是CPU长还是GPU长？是Draw Call多还是纹理大？
- 针对性优化： 比如减少Draw Call、压缩纹理、简化着色器。
- 验证效果： 改完再测，看指标是否改善。不要凭感觉。
一句话总结： 性能优化不是玄学，是科学。用数据说话，按瓶颈下药。
好了，这一章我们搭建了性能优化的「全景图」。下一章，我会带大家深入WebGL的渲染管线，看看每一帧到底发生了什么。到时候，我会用代码示例手把手教你定位瓶颈。咱们下章见！