部分绘图超出屏幕时的 HTML 画布性能答案

【问题标题】：HTML canvas performance when drawing partially beyond screen部分绘图超出屏幕时的 HTML 画布性能
【发布时间】：2017-10-15 00:22:54
【问题描述】：

据我了解，使用 HTML 画布，更大的形状实际上需要更多时间。因此，如果您绘制 100x100 的正方形与 1000x1000 的正方形，您可以预期 100x100 会更快。

这是否也适用于较大但部分在屏幕外的形状？

这是我的意思的一个例子：

a 500x500 canvas
0,0 --------
|          |
|-------500,500

现在，如果我在 (0,250) 处绘制一个宽度为 1000000 的矩形，它将在整个画布上水平拉伸。但是，如果我在 (250, 250) 处绘制一个宽度为 500 的矩形，最终用户看起来会一样，因为它也延伸到整个画布宽度。

这两个矩形是否以相同的速度呈现，因为用户可见的实际部分是相同的？或者额外的宽度，即使它实际上不是不可见的，实际上会影响性能吗？

【问题讨论】：

运行基准测试并查看。然后在这里分享小提琴和结果。
老实说，我只是懒惰并希望其他人已经知道哈哈，但是是的，我可能会这样做并稍后在这里发布结果:)

标签： javascript html performance canvas

【解决方案1】：

所以这并不完全是一个完整的答案，但我做了一些实验，我的结果只会让我更加困惑，尽管我没有看到任何明显的东西可以解释我的结果。

587.2700000000001ms elapsed - test for size 500
108.55999999999995ms elapsed - test for size 50
237.32500000000005ms elapsed - test for size 250
476.45500000000015ms elapsed - test for size 500
500.65499999999975ms elapsed - test for size 1000
478.5500000000002ms elapsed - test for size 2000
58.24000000000024ms elapsed - test for size 5000
58.460000000000036ms elapsed - test for size 10000
60.82999999999993ms elapsed - test for size 25000

认为这些结果很奇怪，我尝试了另一组输入来得到更奇怪的结果

72.76499999999987ms elapsed - test for size 500000
61.690000000000055ms elapsed - test for size 10000
58.47499999999991ms elapsed - test for size 5000
620.9050000000002ms elapsed - test for size 1000
475.0450000000001ms elapsed - test for size 500
379.0250000000001ms elapsed - test for size 400
281.7850000000003ms elapsed - test for size 300
186.54500000000007ms elapsed - test for size 200
120.51500000000033ms elapsed - test for size 100
59.210000000000036ms elapsed - test for size 50000
58.220000000000255ms elapsed - test for size 500000

这些测试是在 Firefox 中进行的，即使对于奇怪的快速尺寸，结果似乎也能正确呈现。

这里是小提琴：https://jsfiddle.net/vrn7xrrj/1/

我将非常感谢您对此的任何意见..

【讨论】：