Appearance
Web 端低端机 11 → 30 FPS 优化
针对 Three.js 虚拟形象 2.0 在低端机型上的帧率问题，通过渲染优化 + 内存治理，将帧率从 11fps 提升至稳定 30fps。
背景
B 站用户虚拟形象 2.0 使用 Three.js 渲染。上线后发现低端机型帧率仅 11fps，远低于可接受的 30fps。需要在不放弃 3D 效果的前提下优化性能。
问题分析（Google DevTools）
| 瓶颈 | 占比 | 优化方向 |
|---|---|---|
| 渲染绘制 | ~50% | 减少 Draw Call、降低顶点数 |
| 动画更新 | ~25% | 骨骼动画替代 BS 动画 |
| 内存/GC | ~15% | 修复内存泄漏 |
| 其他 | ~10% | — |
优化措施
1. BS 动画 → 骨骼动画
- BS（BlendShape）动画每帧需要 CPU 计算顶点变形，开销大
- 改为骨骼动画（骨骼变换在 GPU 端完成），减少碰撞关节数
- 收益：减少动画更新开销 ~30%
2. 减少 Draw Call
- 合并同材质 Mesh
- 合并同贴图的 UV 到一张 Atlas
- 收益：Draw Call 减少约 40%
3. 内存泄漏修复
- 修改 Three.js 底层 WebGLMotionVector 类源码
- 根因：换装部件切换时 WebGL 资源未正确释放
- 修复后连续换装 100 次内存稳定
4. Google DevTools 驱动的逐步优化
Chrome DevTools Performance Tab → 逐帧录制 → 找到最长帧
→ 拆解最长帧中的每个 Task → 定位瓶颈函数
→ 优化该函数 → 重新录制验证结果
| 指标 | 优化前 | 优化后 |
|---|---|---|
| 低端机帧率 | 11fps | 30fps |
| 内存（换装后） | 持续增长 | 稳定 |
| CPU 占用 | 高（BS 计算） | 中等（骨骼在 GPU） |
"效果媲美 Unity 引擎"是当时产品给的评价——Web 端能做到 Unity 原生引擎的流畅度。
公开版深化
案例定位
Web 端低端机 11 → 30 FPS 优化不是孤立笔记，而是性能优化能力下的一个可复用案例。它服务于“性能治理与稳定性优化”这条主线，公开版重点保留问题抽象、工程取舍和可复用方法，不暴露内部系统细节。
关键问题
针对 Three.js 虚拟形象 2.0 在低端机型上的帧率问题，通过渲染优化 + 内存治理，将帧率从 11fps 提升至稳定 30fps。
这篇文章已经覆盖 背景、问题分析（Google DevTools）、优化措施、结果。后续阅读时应重点看三件事：问题如何被定义，方案如何在约束下落地，以及哪些经验可以迁移到下一次类似项目。
企业级产出
| 产出 | 公开表达 |
|---|---|
| 问题定义 | 用用户体验、性能、稳定性或交付效率描述影响 |
| 技术方案 | 保留架构、流程、算法和工具链层面的抽象 |
| 指标证据 | 只使用页面已有数字或经过脱敏审查的量级 |
| 复用方法 | 沉淀为 SOP、检查清单、图谱关系或后续案例链接 |
指标与证据
- Web 端低端机 11 → 30 FPS 优化
- 针对 Three.js 虚拟形象 2.0 在低端机型上的帧率问题，通过渲染优化 + 内存治理，将帧率从 11fps 提升至稳定 30fps。
- B 站用户虚拟形象 2.0 使用 Three.js 渲染。上线后发现低端机型帧率仅 11fps，远低于可接受的 30fps。需要在不放弃 3D 效果的前提下优化性能。
- 渲染绘制 ~50% 减少 Draw Call、降低顶点数
复盘结论
这个案例的核心价值，是把一次具体工程处理沉淀成可检索、可复盘、可继续扩展的技术资产。没有公开证据支撑的细节继续留在私有材料池，不进入线上页面。
公开版深化
案例定位
Web 端低端机 11 → 30 FPS 优化不是孤立笔记，而是性能优化能力下的一个可复用案例。它服务于“性能治理与稳定性优化”这条主线，公开版重点保留问题抽象、工程取舍和可复用方法，不暴露内部系统细节。
关键问题
针对 Three.js 虚拟形象 2.0 在低端机型上的帧率问题，通过渲染优化 + 内存治理，将帧率从 11fps 提升至稳定 30fps。
这篇文章已经覆盖 背景、问题分析（Google DevTools）、优化措施、结果。后续阅读时应重点看三件事：问题如何被定义，方案如何在约束下落地，以及哪些经验可以迁移到下一次类似项目。
企业级产出
| 产出 | 公开表达 |
|---|---|
| 问题定义 | 用用户体验、性能、稳定性或交付效率描述影响 |
| 技术方案 | 保留架构、流程、算法和工具链层面的抽象 |
| 指标证据 | 只使用页面已有数字或经过脱敏审查的量级 |
| 复用方法 | 沉淀为 SOP、检查清单、图谱关系或后续案例链接 |
指标与证据
- Web 端低端机 11 → 30 FPS 优化
- 针对 Three.js 虚拟形象 2.0 在低端机型上的帧率问题，通过渲染优化 + 内存治理，将帧率从 11fps 提升至稳定 30fps。
- B 站用户虚拟形象 2.0 使用 Three.js 渲染。上线后发现低端机型帧率仅 11fps，远低于可接受的 30fps。需要在不放弃 3D 效果的前提下优化性能。
- 渲染绘制 ~50% 减少 Draw Call、降低顶点数
复盘结论
这个案例的核心价值，是把一次具体工程处理沉淀成可检索、可复盘、可继续扩展的技术资产。没有公开证据支撑的细节继续留在私有材料池，不进入线上页面。
公开版深化
案例定位
Web 端低端机 11 → 30 FPS 优化不是孤立笔记，而是性能优化能力下的一个可复用案例。它服务于“性能治理与稳定性优化”这条主线，公开版重点保留问题抽象、工程取舍和可复用方法，不暴露内部系统细节。
关键问题
针对 Three.js 虚拟形象 2.0 在低端机型上的帧率问题，通过渲染优化 + 内存治理，将帧率从 11fps 提升至稳定 30fps。
这篇文章已经覆盖 背景、问题分析（Google DevTools）、优化措施、结果。后续阅读时应重点看三件事：问题如何被定义，方案如何在约束下落地，以及哪些经验可以迁移到下一次类似项目。
企业级产出
| 产出 | 公开表达 |
|---|---|
| 问题定义 | 用用户体验、性能、稳定性或交付效率描述影响 |
| 技术方案 | 保留架构、流程、算法和工具链层面的抽象 |
| 指标证据 | 只使用页面已有数字或经过脱敏审查的量级 |
| 复用方法 | 沉淀为 SOP、检查清单、图谱关系或后续案例链接 |
指标与证据
- Web 端低端机 11 → 30 FPS 优化
- 针对 Three.js 虚拟形象 2.0 在低端机型上的帧率问题，通过渲染优化 + 内存治理，将帧率从 11fps 提升至稳定 30fps。
- B 站用户虚拟形象 2.0 使用 Three.js 渲染。上线后发现低端机型帧率仅 11fps，远低于可接受的 30fps。需要在不放弃 3D 效果的前提下优化性能。
- 渲染绘制 ~50% 减少 Draw Call、降低顶点数
复盘结论
这个案例的核心价值，是把一次具体工程处理沉淀成可检索、可复盘、可继续扩展的技术资产。没有公开证据支撑的细节继续留在私有材料池，不进入线上页面。