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?
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).
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.
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.
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.