问题描述
从 Stuck with SetInterval,SetTimeOut and Requestanimationframe 等可以看出，requestAnimationFrame 重复“一旦浏览器准备就绪”。换句话说，它使浏览器忙碌。
在绘制具有许多数据点的图表时，我正在使用“mousemove”创建“悬停”效果。通过重复使用 requestAnimationFrame 重新绘制整个图表/画布，很容易做到。在这种情况下，代码简短。
我尝试使用 requestAnimationFrame 仅重新绘制鼠标下的数据点（悬停，较长。
它可能因情况而异，但总的来说，requestAnimationFrame 是一种资源密集型方法吗？为了
解决方法
requestAnimationFrame 不是资源密集型的，它的目的是将 CPU 消耗调整为屏幕可以显示的内容（就帧率而言）。
您可以假设 requestAnimationFrame 允许您的代码每屏幕帧运行一次。由您来优化回调的代码，使其不会重新计算静态事物的位置、形状和颜色（仅光标下的点）。
重绘整个画布不是问题，问题是每帧重绘相同的图像。
相反，仅当图形中的某些内容发生变化时才重新绘制。
您可以启动一个无限的 requestAnimationFrame (rAF) 循环等待状态改变，但这将迫使浏览器保持在动画模式，这将迫使它在事件中进入一些分支- 否则它可以忽略的循环（specs）。有关详情，请参阅 this answer of mine。
鉴于 mouse events are now throttled to screen refresh rate，在现代浏览器中，您甚至不会通过在 rAF 中限制此事件来获胜，除非所有浏览器仍然不这样做，看着您的 Safari....
总结一下，
- 全部清除/全部重绘。只绘制画布的一部分并不能提高性能，这样您就可以避免编码时的很多麻烦。
- 仅在图形发生变化时重绘。避免无用的渲染。
- 避免让 requestAnimationFrame 循环无缘无故地保持活动状态。它只会保护树木。