从卡住SetInterval,SetTimeOut和Requestanimationframe或类似的，Requestanimationframe重复"一旦浏览器准备好了"。换句话说，它使浏览器处于繁忙状态.
我正在创建"hover"使用"鼠标移动"当绘制有许多数据点的图表时。通过重复使用requestAnimationFrame重新绘制整个图表/画布很容易做到。代码为短在本例中
代替整个画布，我尝试使用requestAnimationFrame仅重新绘制鼠标下的数据点(悬停，画布的1%)。为此，需要添加几个数组，代码更长.
它可以因情况而异，但一般来说，requestAnimationFrame是资源密集型的方法?为了1%的面积而重新绘制整个画布似乎不太经济。
requestAnimationFrame不是资源密集型的，它的目的是调整CPU消耗到屏幕可以显示的程度(就帧率而言)。
您可以假设requestAnimationFrame允许您的代码在屏幕的每一帧运行一次。这取决于你来优化回调的代码，这样它就不会重新计算静态事物的位置，形状和颜色(只有光标下的点)。
重新绘制整个画布不是问题，问题是每帧重新绘制相同的图像。
相反，只在图形发生更改时才重新绘制。
你可以启动一个无限的requestAnimationFrame (rAF)循环等待状态的改变，但是这将迫使浏览器停留在动画模式，这将迫使它在事件循环中进入一些分支，否则它可能会忽略(specs)。更多细节请看我的回答。
考虑到鼠标事件现在被限制为屏幕刷新率，在现代浏览器中，你甚至不会通过在rAF中限制此事件而获胜，除非所有浏览器仍然不这样做，看着你的Safari…。
总结一下，
- 清空所有/重绘所有只绘制画布的一部分并不能提高性能，这样你就可以避免在编码时遇到很多麻烦。
- 当你的图形改变时，只重新绘制避免无用的渲染。
- 避免让requestAnimationFrame循环处于活动状态。它只会保护树木。