requestAnimationFrame 资源消耗：重绘整个或部分画布答案

【问题标题】：requestAnimationFrame resource consumption: redrawing whole or part of canvasrequestAnimationFrame 资源消耗：重绘整个或部分画布
【发布时间】：2021-03-11 13:14:15
【问题描述】：

从Stuck with SetInterval ,SetTimeOut and Requestanimationframe 等可以看出，requestAnimationFrame 重复“一旦浏览器准备好”。换句话说，它使浏览器保持忙碌。

在绘制包含许多数据点的图表时，我正在使用“mousemove”创建“悬停”效果。重复使用 requestAnimationFrame 重新绘制整个图表/画布很容易。在这种情况下，代码短。

我尝试使用 requestAnimationFrame 仅重新绘制鼠标下的数据点（悬停，更长。

可能因情况而异，但总的来说，requestAnimationFrame 是一种资源密集型方法吗？为

【问题讨论】：

标签： javascript performance animation canvas requestanimationframe

【解决方案1】：

requestAnimationFrame 不是资源密集型的，它的目的是将 CPU 消耗调整为屏幕可以显示的内容（以帧率计）。

您可以假设requestAnimationFrame 允许您的代码在屏幕的每一帧中运行一次。由您来优化回调的代码，使其不会重新计算静态事物的位置、形状和颜色（仅光标下的点）。

【讨论】：

【解决方案2】：

重绘整个画布不是问题，问题是每一帧都重绘相同的图像。
相反，只有在图形发生变化时才重绘。

你可以启动一个无限的 requestAnimationFrame (rAF) 循环等待状态改变，但这会强制浏览器停留在 animated 模式，这会迫使它在事件中进入一些分支-loop，否则它可能会忽略 (specs)。详情请见this answer of mine。

鉴于mouse events are now throttled to screen refresh rate，在现代浏览器中，您甚至无法通过在 rAF 中限制此事件来获胜，除了所有浏览器仍然不这样做，_{看着你的 Safari...}.

总结一下，

全部清除/重绘全部。仅绘制画布的一部分并不会显着提高性能，这样可以避免编码方面的很多麻烦。
仅在您的图形发生变化时重绘。避免无用的渲染。
避免让 requestAnimationFrame 循环一直处于活动状态。它只是保存树木。

【讨论】：

我添加了另一个事件监听器来检查鼠标是否在画布上。否则不会反复重绘。我想这就是你的建议。谢谢。
@weixwei 不仅没有。我建议您仅在某些情况发生更改时重绘（例如，当鼠标进入/退出您的数据点时，并且您仅使用 rAF 来限制鼠标事件：如果没有动画，请不要使其成为动画循环。
好的，这更进一步，而且很有意义。