Avoiding reflow

When modifying the DOM, you must try to avoid generating a complete reflow of the whole document, or of a large part of it. There are many ways of minimizing the risk of doing this, and modern browsers are pretty good at optimizing when they do it.

Typically, the browser will try to regroup as much modification it can before reflowing the document. However, if you try to access information that is dependent on one of those modifications, it will have to perform a reflow in order to be able to calculate the new information.

A pretty good rule of thumb is to avoid reading the DOM, like the plague, and as a last resort, group all reads and perform them at the end of the refresh loop.

In our game there is one point where we are in this exact situation: Each time we access the X position of the player's avatar, we force the browser to reflow. Position and size is probably the most frequently accessed information during the game loop. One simple way to make things faster is to avoid...