HTML5 canvas performance on small and large files

Question

It seems like I'm experiencing different performance using HTML5 canvas based on page memory size ... maybe the number of images loaded (off-screen). What is the best way to find the source of a performance problem? Or does anyone know if there really is a performance issue when many downloaded files are downloaded, even if they are not all used right away?

Here is an example of good performance. I have a relatively simple map. This is from 700 to 800 KB. You can move around to scroll this map relatively smoothly.

There is another file there (which you might not want to see because of its large size).

It is about 16 MB and contains dozens, maybe of the order of 100 images / canvases. He draws a smaller view, so he should go faster. But this is not so. Many cards lag far behind a simple demo.

I could try measuring the code to start synchronization, but I hadn’t done this in JavaScript before and could use some help. If there are simpler ways to find the source of performance issues, I would be interested.

Answer 1

In Google Chrome and Chromium, you can open the developer tools (tools-> developer tools), and then click "Profiles". Click the circle below, let the canvas redraw, and then click the circle again. This gives you a profile that shows how much time has been spent there.

Answer 2

I have been working on some complex canvas materials for which rendering performance is important.

I wrote some test cases in jsperf and came to the conclusion that the rule of thumb is that the original screen should not exceed 65536 pixels.

I have not yet come to the conclusion of why this is so, but probably the data structure or data type should be changed when working with large websites.

putImageData showed similar results.
the size of the destination canvas does not seem to matter.

Here are some tests I wrote that examine this performance limitation: http://jsperf.com/magic-canvas/2 http://jsperf.com/pixel-count-matters/2