Question

I’m creating a game with jQuery, where I need to update 200+ (sometimes 300) div’s every tick (about 0.02 seconds). Right now performance is great (although pushing the limits) and runs on most browsers.

My game uses “units”, a class that has a Create() and Update() function.
Create() creates a 32×32 sized div and gives it a name, while Update() sets the position with two important css calls:

    $("#unit"+this.uid).css("left", posx+"px");
    $("#unit"+this.uid).css("top", posy+"px");

I’ve been told HTML5 would run faster “because the content of a HTML5 canvas does not change the DOM tree”. Would this have an effect in my case? I’d test this myself, but I have no experience or knowledge about HTML5 and like to know if I should try anything at all first.

Thank you in advance.

Answer 1

You may want to explore CSS3 transitions. You can animate css properties over a period of time, instead of every tick. It also is able to use hardware acceleration on webkit browsers.