Javascript HTML5画布在小文件和大文件上的性能

我似乎在使用基于页面内存大小的HTML5画布时体验到了不同的性能。。。可能是加载的图像（屏幕外画布）的数量。如何最好地找到性能问题的根源？或者，有人知道当加载了大量数据时，即使不是一次使用所有数据，实际上是否存在性能问题吗

我有一张相对简单的地图。它的大小在700到800KB之间。您可以拖动以相对平滑地滚动此地图

（由于其尺寸较大，您可能不想查看）

它大约16MB，包含几十张图片，大概有一百张图片/画布。它绘制的视图更小，因此速度应该更快。但事实并非如此。与更简单的演示相比，许多地图的滞后性相当严重

---

我可以尝试插入代码来开始计时，但我以前没有在JavaScript中这样做过，需要一些帮助。如果有更简单的方法找到性能问题的根源，我会感兴趣。

在Google Chrome和Chrome中，您可以打开开发人员工具（工具->开发人员工具），然后单击“配置文件”。按下底部的圆圈，让画布重新绘制，然后再次单击圆圈。这将为您提供一个配置文件，显示在何处花费了多少时间。

我一直在处理一些复杂的画布内容，其中渲染性能对我很重要

我用jsperf编写了一些测试用例，并得出结论，根据经验法则，屏幕外画布的源像素不应超过65536像素

我还没有得出结论，但在处理大型源代码调查时，可能必须更改数据结构或数据类型

putImageData显示了类似的结果。
目标画布的大小似乎并不重要

下面是我编写的一些测试，它们探索了这种性能限制：

---

谢谢！那很有帮助。实际上，花费大部分时间的函数是在画布上绘制的函数中。我需要进一步调查，可能还有后续问题。我将比较调用该函数的次数与简单示例调用它的次数。如果数量减少（如预期），我可能会有后续问题。我决定将当前的后续问题作为单独的问题发布在上，因此我将接受此问题的答案。我还发现chrome://tracing 我希望能提供一些信息，但对我的经验水平来说不是很有用。我在我的后续问题中发布了一些结果，但我不知道该如何理解。