HTML and CSS Reference
In-Depth Information
when Canvas implementations were much slower.) On mobile it's a different story. Anything you can do to op-
timize 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 (the total column.) The majority of the time appears to be spent in a mysterious item
called “(program).” This row actually represents the browser and in the case of Canvas games usually repres-
ents extra processor cycles not used by your game. If you develop a CSS3 or SVG game, however, you may not
actually have that many free cycles (look at the Timelines feature to optimize this) because the browser may do
a lot of work handling animations and transitions.
Figure 7-15:
A profile of
Alien Invasion
in Chrome.
Figure 7-15
shows the breakdown for
Alien Invasion
; you can see the various
draw
methods take a good
deal of the time. Unfortunately this isn't a great spot to optimize because these
draw
methods are simple and
