HTML and CSS Reference
In-Depth Information
just call the Canvas
draw
method. What this does mean, however, is that figuring a way to reduce the number
of draw calls might be a way to optimize the game.
One area in which you might originally have supposed there would be a good chance to improve performance
was the collision method because it's quite basic, but before you spend hours optimizing a routine, make sure
it would actually make a difference. The total percentage of time spent in the game is 100%-92.35% [the per-
centage spent in the “(program)” chunk], which equals 7.65%. The total time spent in collide is only 0.10%.
This means that the
collide
method represents only 0.10%/7.65%, or 1.3% (0.013), of total game execution
time. You can optimize that method by reducing its execution by 50% (a big optimization), which would result
in only a .65% increase in execution speed. This is not something that would necessarily be noticeable to the
user and is probably not worth your time to optimize.
When optimizing, you need to recognize where it's worth spending your time optimizing. In this case even
though the
collide
method uses a native algorithm and could be optimized easily, it's probably not worth the
time. In other situations in which many different objects collide on the screen, it would be a better target.
The other factor is that although most mobile browsers share WebKit roots; Android and iOS have different
JavaScript engines. This means that whereas Chrome developer tools may be a good indication of where there
are performance problems on Android, it isn't quite as good an indicator for iOS. In this case you may want to
fire up Safari on the desktop, launch the developer tools (which are nearly identical to Chrome's because they
share the same codebase) and profile there.
Figure 7-16
shows the result of running a similar profile benchmark
on Safari.
Figure 7-16:
A profile of
Alien Invasion
in Safari.
The JavaScript engine used in Safari doesn't do as good a job with anonymous functions as Chrome's V8
JavaScript engine, but it does give an added advantage of enabling you to drill down into the time spent in
native method calls. If you have trouble with iOS and need to optimize, give your anonymous methods names
(
function collideCallback() { .. }
instead of
function() { .. }
) even if you don't need
them for later reference.
