HTML5 and game development

Most HTML rendering is done through the HTML Document Object Model (DOM). The DOM is what is known as a retained mode graphical library. Retained mode graphics retain a tree known as a scene graph. This scene graph keeps track of all the graphical elements in our model and how to render them. The nice thing about retained mode graphics is that they are straightforward for a developer to manage. The graphical library does all the heavy lifting and keeps track of our objects for us as well as where they render. The downside is that a retained mode system takes up a lot more memory and provides a lot less control to the developer. When we write HTML5 games, we could take images rendered in the DOM using <IMG> HTML elements and move those elements around using JavaScript or CSS animations to manipulate the positions of those images within the DOM directly.

However, this would, in most circumstances, make the game painfully slow. Every time we move an object in our DOM, it forces our browser to recalculate the position of all other objects within our DOM. Because of this, manipulating objects from within our DOM to make web games is usually a non-starter.