我似乎在使用基于页面内存大小的HTML5画布体验不同的性能......可能是加载的图像数量（屏幕外画布）。如何最好地找到性能问题的根源？或者有人知道，当加载了大量数据时，实际上是否存在性能问题，即使并非所有数据都被立即使用？
Here's an example of good performance.我有一张相对简单的地图。它介于700到800 KB之间。您可以拖动以相对平滑地滚动此地图。
There's another file（由于尺寸较大，您可能不想看。）
大约16 MB，包含数十个，可能大约有一百个图像/画布。它绘制了一个较小的视图，因此它应该更快。但事实并非如此。与简单的演示相比，许多地图都相当严重。
我可以尝试检测代码以开始计时，但我之前没有在JavaScript中完成此操作，并且可以使用一些帮助。如果有更简单的方法来找到性能问题的根源，我会感兴趣。
答案 0 :(得分：1)
在Google Chrome和Chromium中，您可以打开开发人员工具（工具 - >开发人员工具），然后点击“个人资料”。按下底部的圆圈，让画布重绘，然后再次单击圆圈。这会为您提供一个配置文件，显示在何处花费了多少时间。
答案 1 :(得分：1)
我一直在研究一些复杂的画布，其中渲染性能对我很重要。
我在jsperf中编写了一些测试用例，并得出结论，经验法则是源屏外画布不应超过65536像素。
我还没有得出结论为什么会这样，但在处理大型源画布时，可能需要更改数据结构或数据类型。
putImageData显示了类似的结果 目标画布大小似乎并不重要。
以下是我编写的一些探索此性能限制的测试： http://jsperf.com/magic-canvas/2 http://jsperf.com/pixel-count-matters/2