WebGL 3D 页面先做帧预算,再决定模型和特效
3D 页面卡顿通常不是“浏览器不行”,而是单帧里提交了太多 draw call、像素或脚本工作。先用目标设备捕获一帧,再决定砍哪里。
预算按阶段拆
CPU 侧看场景更新、剔除和提交,GPU 侧看几何、材质、阴影与后处理。重复物体尝试实例化,静态网格按场景结构合并;透明与全屏效果要关注 overdraw。
renderer.info.reset();
renderer.render(scene, camera);
console.table(renderer.info.render);
资源加载也算体验
模型按视区和交互需要加载,纹理选择合适压缩格式并准备降级档位。组件销毁时释放几何、材质、纹理与事件监听,不能只把 canvas 从 DOM 移除。
比较条件固定
记录设备、分辨率、场景、相机路线和浏览器版本。平均 FPS 会掩盖尖峰,帧时间分布和 GPU 捕获更有用。没有同条件记录,不写固定提升比例。


