clearRect() 整个画布更快还是仅 clearRect() 一部分更快？答案

【问题标题】：Is it faster to clearRect() the whole canvas or to clearRect() only some piece?clearRect() 整个画布更快还是仅 clearRect() 一部分更快？
【发布时间】：2022-01-15 05:05:26
【问题描述】：

我对 clearRect() 进行了基准测试以清除整个画布：

clearRect(0, 0, canvas.width, canvas.height)

vs clearRect() 我只需要清除的小区域。

我尝试了小 (800x500) 和大 (1000x3000) 画布。
我在测试时关闭了 Firefox 中降低的时间精度。
我关闭了所有包裹画布方法的隐私插件，以避免通过画布被利用。
我使用performance.now()（而不是 Date.now()）测量了 start_time 和 end_time。

无论我做什么，似乎clearRect() 的性能是完全不可预测和无与伦比的。有时清除整个画布更快，有时更慢；在这两种情况下都快 2 倍或慢 2 倍。这完全是随机的。

谁能详细说明浏览器在做什么以及为什么结果如此不同和无法比较？

同样重要的是，预计什么会更快？

【问题讨论】：

标签： html5-canvas

【解决方案1】：

clearRect() 实际上是一个fillRect() 与"clear" 复合模式。
在大多数引擎中，此操作将由 GPU 完成，就像任何绘画一样，清除区域的大小无关紧要。
可能重要的是剩余像素的合成（抗锯齿）。
重要的是操作的数量。

所以如果你真的只有一个部分要清除，那么只清除这部分可能与清除整个部分相似或更好（取决于需要重绘的内容），但是一旦你有多个部分要清除，那么清除整体应该更快。

说了这么多，最重要的是要考虑代码的可读性，可以注意到“全部清除，全部重绘”策略是画布程序员的事实标准。

【讨论】：

谢谢。我根本不关心代码的可读性，我只需要它快。
然后进行基准测试。没有看到你在做什么，我们无法判断哪个会更快。但是，虽然我不想显得傲慢，但根据我在这方面几年的经验，我没有一次选择只清除画布的一部分而不是全部清除。
基准测试。根据浏览器和 iOS，clearRect() 和 fillRect() 的性能非常不一致。 FF、Safari 和 Chrome 对这些功能的重新性能以及 drawImage() 也报告了一些问题。所以事实证明，无论我使用什么功能，都没有明确的答案，也没有提供一致性能的解决方案。

【解决方案2】：

只清除需要清除的屏幕区域会更快。

例如

clearRect(camera.x,camera.y,camera.width,camera.height);

清少比清多更有效率。

【讨论】：

“预计”什么也没解释。请详细说明。