小文件与大文件的HTML5画布性能 [英] HTML5 canvas performance on small vs. large files

问题描述

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

I seem to be experiencing varying performance using an HTML5 canvas based on the memory size of the page... perhaps the number of images (off-screen canvases) that are loaded. How to I best locate the source of the performance problem? Or does anyone know if in fact there is a performance issue when there's a lot of data loaded, even if it isn't all being used at once?

这是一个表现良好的例子。我有一个相对简单的地图。它介于700到800 KB之间。您可以拖动以相对平滑地滚动此地图。

Here's an example of good performance. I have a relatively simple map. It's between 700 and 800 KB. You can drag to scroll around this map relatively smoothly.

还有另一个档案（由于它的大尺寸，你可能不想看。

There's another file (which you may not want to look at due to its large size).

大约16 MB并且包含数十个，可能大约有一百个图像/画布。它绘制了一个较小的视图，因此它应该更快。但事实并非如此。与简单的演示相比，许多地图都相当严重。

It's about 16 MB and contains dozens, maybe on the order of a hundred images/canvases. It draws a smaller view so it should go faster. But it doesn't. Many of the maps lag quite severely compared to the simpler demo.

我可以尝试检测代码以开始计时，但我之前没有在JavaScript中完成此操作，并可以使用一些帮助。如果有更简单的方法来找到性能问题的来源，我会感兴趣。

I could try to instrument the code to start timing things, but I have not done this in JavaScript before, and could use some help. If there are easier ways to locate the source of performance problems, I'd be interested.

推荐答案

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

In Google Chrome and Chromium, you can open the developer tools (tools->developer tools) and then click on "Profiles". Press the circle at the bottom, let the canvas redraw and then click on the circle again. This gives you a profile that shows how much time was spent where.

这篇关于小文件与大文件的HTML5画布性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！