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.
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.
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 ...