Professional HTML5 Mobile Game Development

Profiling and Optimizing Your Code

HTML5 Canvas performance on the desktop has reached a point on most browsers in which you don’t need to pay too much attention to performance when you create a simple 2-D game. (This was not the case in 2010, when Canvas implementations were much slower.) On mobile it’s a different story. Anything you can do to optimize your game will most likely pay dividends with a smoother game experience and a wider range of devices with an acceptable frame rate.

Developer tools comes with three different tools to help you eke out those last few bits of performance of your game. Start with the most important one first.

Running Profiles

Profiling your code means tracking the time taken to execute every function call in your game. There are ways to do this in the code by logging the start and end time around each function call, but luckily Developer Tools comes with a dead-simple way to do this at the click of the button without changing your code.

To create a profile of your game’s execution, open the Profiles tab in Developer Tools; make sure the Collect JavaScript CPU profile is selected; and then click Start. Play your game for a bit, and then click Stop. You can also click the small Record button (the gray circle).

You get a result that looks something like Figure 7-15, showing a breakdown of each method call in your game, how long the game spent in the method (the self column), and how long the entire method took, including calls to any other methods ...