「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」
背景
在学习threejs的时候，我们要创建一个旋转的物体，实现旋转的教程，有如下一段描述：
现在，如果将之前写好的代码复制到HTML文件中，你不会在页面中看到任何东西。这是因为我们还没有对它进行真正的渲染。为此，我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）的东西。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）。如果你是一个浏览器游戏开发的新手，你或许会说 “为什么我们不直接用setInterval来实现刷新的功能呢？” 当然啦，我们的确可以用setInterval，但是，requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。
原理
requestAnimationFrame
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
setInterval
setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。
requestAnimationFrame对比setInterval优点：
-
requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。 -
在隐藏或不可见的元素中，
requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。(重点)
threejs安装性能插件
1. 引入Stats插件
import Stats from "three/examples/jsm/libs/stats.module";
2. 初始化
stats: Stats | null = null;
3. 设置Stats
setStats(): void {
this.stats = Stats();
document.body.appendChild(this.stats.dom);
}
