Are you using a engine/ide? Like Unity or any others?
Viewing post in My HTML5 prototype is running slow
Ok, so your making a from scratch project. My guess is that you have multiple image files that you are loading. And you've mentioned backgrounds, so perhaps each background is a separate image? My advice is that you put all of your images together as 1 huge sprite sheet.
And then using 'blitting' to copy from that sprite sheet onto your games canvas.
[ This is how to copy from a section of the source, to a section in the canvas:
canvas.context.drawImage(source, from x, from y, from w, from h, to x, to y, to w, to h) ]
Using drawImage you would copy each background from the sprite sheet onto the display canvas element. So instead of loading a new background you would be drawing from 1 sprite sheet that is fully loaded before the game starts.
You should never have more than 1 or 2 canvas elements in the DOM. For better performance you should use 1 loaded sprite sheet and off screen canvas elements that you draw from onto a single displayed canvas.
If you have static (non-animated) html div elements that need a background, another option is to bake the backgrounds into the css of the div by using a base64 data string of the image as the css background url.
Sorry for the late reply and thank you for the amazing tips!
Your guess is correct. I'm using different images on different backgrounds/divs. Every scene/lvl in my prototype is represented by a single div, and there is a special pattern, that I have created, that decides what objects to show or remove on the current scene.
The pre-rendering technique called Blitting that you mentioned seems to be very useful in general and maybe just what I need. But i didn't quite get that "baking" method so I'm gonna need to read more about it.
I wish I knew where I could find all of those hidden techniques that make a huge difference in the outcome, instead of learning them with time. (T __ T)
A few good spots for general html5 learning resources are html5rocks html5gamedevs and developer.mozilla.org. Also w3schools is a great html/javascript reference resource.
To generate a base64 string from your image you can use an online "base64 image encoder".
Then to bake the string into css you'll use a data url like this:
div#backgroundDivId { background: no-repeat url("data:image/png;base64, ...."); }
That way the css and images would get loaded as one before the game starts.
And take heart, as you work on and release projects, you'll only get better and better.