560 supercharged javascript graphics

www.it-ebooks.info


www.it-ebooks.info


Supercharged JavaScript Graphics

www.it-ebooks.info


www.it-ebooks.info


Supercharged JavaScript Graphics

Raffaele Cecco

Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo

www.it-ebooks.info


Supercharged JavaScript Graphics
by Raffaele Cecco
Copyright © 2011 Raffaele Cecco. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions
are also available for most titles (). For more information, contact our
corporate/institutional sales department: (800) 998-9938 or

Editor: Simon St. Laurent
Production Editor: Holly Bauer
Copyeditor: Rachel Monaghan
Proofreader: Genevieve d'Entremont

Indexer: Ellen Troutman Zaig
Cover Designer: Karen Montgomery
Interior Designer: David Futato
Illustrator: Robert Romano

Printing History:
July 2011:

First Edition.

Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of
O’Reilly Media, Inc. The image of a maned sheep and related trade dress are trademarks of O’Reilly
Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a
trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume
no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

ISBN: 978-1-449-39363-2
[LSI]
1309979968

www.it-ebooks.info

Table of Contents

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
1. Code Reuse and Optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Keeping It Fast
What and When to Optimize
Homespun Code Profiling
Optimizing JavaScript
Lookup Tables
Bitwise Operators, Integers, and Binary Numbers
Optimizing jQuery and DOM Interaction
Optimizing CSS Style Changes
Optimizing DOM Insertion
Other Resources

4
5
7
8
8
12
19
20
23
23

2. DHTML Essentials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Creating DHTML Sprites

Image Animation
Encapsulation and Drawing Abstraction (aka Hiding Stuff)
Minimizing DOM Insertion and Deletion
The Sprite Code
A Simple Sprite Application
A More Dynamic Sprite Application
Converting into a jQuery Plug-in
Timers, Speed, and Frame Rate
Using setInterval and setTimeout
Timer Accuracy
Achieving Consistent Speed
Internet Explorer 6 Background Image Caching

25
26
28
28
28
30
32
35
38
38
40
41
45

3. Scrolling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
CSS-Only Scrolling Effects

47

v

www.it-ebooks.info


Scrolling with JavaScript
Background Image Scrolling
Tile-Based Image Scrolling

51
51
53

4. Advanced UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
HTML5 Forms
Using JavaScript UI Libraries
Using jQuery UI for Enhanced Web Interfaces
Heavy Duty UI with Ext JS
Creating UI Elements from Scratch
Creating a 3D Carousel

69
71
71
75
78
79

5. Introduction to JavaScript Games . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Game Objects Overview
The Game Code
Game-Wide Variables
Reading Keys
Moving Everything
A Simple Animator
Collision Detection
Aliens
The Player
Shields
Mystery Saucer
The Game
Putting It All Together

92
94
94
95
97
98
99
104
110
113
114
115
119

6. HTML5 Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Canvas Support
Bitmaps, Vectors, or Both?
Canvas Limitations
Canvas Versus SVG
Canvas Versus Adobe Flash
Canvas Exporters
Canvas Drawing Basics
The Canvas Element
The Drawing Context
Drawing Rectangles
Drawing Paths with Lines and Curves
Drawing Bitmap Images
Colors, Strokes, and Fills
Animating with Canvas
Canvas and Recursive Drawing
vi | Table of Contents

www.it-ebooks.info

124
124
125
125
126
127
129
129
129
130
130

138
140
144
147


Canvas Tree Page Layout
Replacing DHTML Sprites with Canvas Sprites
The New CanvasSprite Object
Other Code Changes
A Graphical Chat Application with Canvas and WebSockets
The WebSockets Advantage
WebSockets Support and Security
The Chat Application

149
149
150
151
151
152
153
154

7. Vectors for Games and Simulations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Operations on Vectors
Addition and Subtraction
Scaling
Normalization
Rotation

Dot Product
Creating a JavaScript Vector Object
A Cannon Simulation Using Vectors
Simulation-Wide Variables
The Cannonball
The Cannon
The Background
The Main Loop
Page Layout
Rocket Simulation
The Game Object
The Obstacle Object
The Rocket Object
Background
Collision Detection and Response
Page Code
Possible Improvements and Modifications

170
170
171
171
171
172
173
174
175
176
176
178

179
179
180
181
182
183
186
186
189
190

8. Google Visualizations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Limitations
Chart Glossary
Image Charts
Data Formats and Chart Resolution
Using Dynamic Data
Summary
Interactive Charts
Interactive Charts Events

194
196
197
199
203
207
207
211

Table of Contents | vii

www.it-ebooks.info


9. Reaching the Small Screen with jQuery Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
jQuery Mobile
TilePic: A Mobile-Friendly Web Application
TilePic Game Description
TilePic Game Code
PhoneGap

216
218
218
220
230

10. Creating Android Apps with PhoneGap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Installing PhoneGap
Installing the Java JDK
Installing the Android SDK
Installing Eclipse
Installing Android Development Tools
Installing PhoneGap
Creating a PhoneGap Project in Eclipse
Altering the App.java File
Altering the AndroidManifest.xml File
Creating and Testing a Simple Web Application
Testing the TilePic Application

232
232
233
234
235
236
236
238
239
240
241

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

viii | Table of Contents

www.it-ebooks.info


Preface

Having been a video game developer for many years and being used to working with
high-performance programming languages and hardware, I initially had modest expectations of graphics programming with JavaScript. What I actually found was an
excellent and efficient programming language that is continually being leveraged with
better browsers, performance enhancements, and exciting new facilities. Combined
with features such as Canvas, JavaScript offers web developers a truly viable alternative
to plug-ins such as Adobe Flash, and features such as WebGL ensure a very bright
future for graphics programming using JavaScript and a browser.
This book is for those who have a good working knowledge of JavaScript and would

like to experiment with graphics programming that goes beyond simple hover effects
or relying purely on the animation facilities of libraries such as jQuery. Within these
pages, I cover various graphics-related subjects, including:
• Reusing and optimizing code, including inheritance techniques and performance
tips
• Taking advantage of the surprising graphics power of regular DOM manipulation
(DHTML)
• Using the Canvas element for additional graphics power
• Creating video games
• Using math for creative graphics and animation
• Presenting your data in creative ways with the Google Visualizations API and Google Chart Tools
• Using jQuery effectively and developing graphically oriented jQuery plug-ins
• Creating graphically rich web applications suitable for mobile devices using jQuery
Mobile
• Using PhoneGap to create native Android applications from your web applications
This fast-paced book will give you a broad kick-start into various graphics techniques,
hopefully whetting your appetite for further exploration of the subjects covered.
Experiment and have fun!

ix

www.it-ebooks.info


Audience and Assumptions
Readers of this book should have a good working knowledge of creating websites and
web applications—and in particular, the use of JavaScript.
I like jQuery because it speeds up development, and many of the code samples include
this library by default. In general, any external libraries and associated files are included
from a reliable content delivery network such as Google’s, thus avoiding the need for

you to copy files to your own web space.
Math has been kept to a minimum, although some of the examples use basic vectors
and trigonometry.

Organization
The book is fast paced, with the first graphics programming examples appearing in
Chapter 1.
In the subsequent chapters, I cover a variety of graphics-oriented topics, focusing primarily on subjects that can add impressive visual impact and interactivity to your web
applications.
No book about interactive graphics would be complete without a discussion of video
games. We’ll explore this subject in depth by developing a full video game application,
as well as examining features that are useful for games projects, such as sprites and
scrolling.
The topics covered in each chapter can be summarized as follows:
Chapter 1, Code Reuse and Optimization
Covers JavaScript object-oriented programming techniques as well as code optimizations (including jQuery optimizations) that are useful where performance
is important in graphics-based applications. We’ll also discuss the little-used JavaScript binary operators and how you can use them for optimization.
Chapter 2
Shows how regular DOM manipulation (DHTML) can be used for fast-moving
graphics. We’ll develop a sprite system (useful for games and other effects) and see
how it works within the context of a jQuery plug-in.
Chapter 3, Scrolling
Covers basic CSS scrolling techniques, including parallax effects. We’ll then move
on to JavaScript-controlled scrolling and finally to a fast, tile-based parallax scrolling system. I’ll introduce you to the powerful Tiled map editor, showing you how
to create tile-based maps.

x | Preface

www.it-ebooks.info

Chapter 4, Advanced UI
Includes coverage of the user interface libraries jQuery UI and Ext JS. We’ll explore
the differing approaches of the two libraries and their respective suitabilities for
various types of applications. In addition to using existing UI libraries, we’ll build
a 3D carousel from scratch.
Chapter 5, Introduction to JavaScript Games
Demonstrates how to build fun and playable games without resorting to external
plug-ins such as Flash. Subjects covered include collision detection and object
handling. We’ll also develop a full retro-style arcade game to illustrate in action
the techniques we’ve discussed.
Chapter 6, HTML5 Canvas
Examines the Canvas element in depth, with numerous examples—including how
to develop a graphical chat application using Canvas and WebSockets. Canvas
topics include an introduction to basic drawing, strokes, fills, gradients, recursive
drawing, bitmaps, and animation.
Chapter 7, Vectors for Games and Simulations
Covers the myriad uses for 2D vectors in graphical applications and games, proving
that a little bit of math can go a long way. Code examples include cannon and
rocket simulations with realistic movement.
Chapter 8, Google Visualizations
Explores Google Chart Tools, an expansive resource of data visualization tools that
can put an exciting spin on most kinds of data. From bar charts to Google-O-Meter
gauges, this chapter covers the implementation of both static and interactive charts
and other graphical visualizations in your applications. It includes the crucial topic
of formatting your data in the correct way for Chart Tools to use.
Chapter 9, Reaching the Small Screen with jQuery Mobile
Describes jQuery Mobile, a framework built on top of jQuery to provide a unified
user interface to mobile-targeted web applications. jQuery Mobile turns regular
HTML pages into an interactive and animated mobile experience. This chapter

covers the development of a graphical sliding puzzle game specifically geared to
the jQuery UI and mobile devices.
Chapter 10, Creating Android Apps with PhoneGap
Want to create a native mobile application using your usual web development
skills? PhoneGap comes to the rescue. This chapter explains how to install and
configure PhoneGap to create native Android applications. After we walk through
installation and configuration, we’ll convert the sliding puzzle game we developed
in Chapter 9 into a native app ready for deployment to mobile devices.

Preface | xi

www.it-ebooks.info


Conventions Used in This Book
The following typographical conventions are used in this book:
Italic
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width

Indicates computer code in a broad sense, including commands, arrays, elements,
statements, options, switches, variables, attributes, keys, functions, types, classes,
namespaces, methods, modules, properties, parameters, values, objects, events,
event handlers, XML tags, HTML tags, macros, the contents of files, and the output
from commands.
Constant width bold

Shows commands or other text that should be typed literally by the user.
Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.
This icon signifies a tip, suggestion, or general note.

This icon indicates a warning or caution.

Websites and pages are mentioned in this book to help you locate online information
that might be useful. Normally I specify both the address (URL) and the name (title,
heading) of a page. Some addresses are relatively complicated, so you can probably
locate the pages more easily by using your favorite search engine to find a page by its
name, typically by entering it inside quotation marks. This method may also help if
you can’t find the page by its address; it may have simply moved elsewhere, so the name
could still work.

Using Code Examples
This book contains many code snippets and examples, along with several complete
and substantial applications. Some of these will be laborious to enter manually, so I
would recommend copying the code from the book’s code repository. Larger portions
of code may be interspersed with regular copy text. This helps provide a fluid narrative
through the code, rather than requiring you to constantly cross-reference code to text
in different locations.
xii | Preface

www.it-ebooks.info


Where an example HTML page is featured, most of the examples use the HTML5
doctype:
<!DOCTYPE html>

For convenience, any CSS styles used in the examples are embedded within the HTML

of the page. This is not necessarily the approach that you should take with production
web applications, as external style sheets are recommended. However, within the context of a book, it makes sense to keep things together where possible. You can find the
code examples here:
/>
Target Browsers
Most of the example code in this book will work on reasonably up-to-date browsers,
such as:
•
•
•
•
•

Firefox 3.6x+
Safari 4.0x+
Opera 10.x+
Chrome 5.x+
Internet Explorer 8+

In fact, some of the examples work even in IE6 and IE7, although I don’t recommend
using these browsers.
The examples were fully tested on Windows machines using XP, Vista, and Windows
7, and partially tested on iOS. In theory, the examples should also work on Linux
versions of the supported browsers.
Use of the Canvas tag is limited to browsers that support it, so for Internet Explorer,
this means version 9 only (for native support without any additional plug-ins or
libraries).
A handful of the examples require a specialized environment to work, such as a mobile
development environment (PhoneGap), server language (PHP), or a specific browser.
Where this is the case, I cover setting up and configuring the environment.

Safari® Books Online
Safari Books Online is an on-demand digital library that lets you easily
search over 7,500 technology and creative reference books and videos to
find the answers you need quickly.
With a subscription, you can read any page and watch any video from our library online.
Read books on your cell phone and mobile devices. Access new titles before they are

Preface | xiii

www.it-ebooks.info


available for print, and get exclusive access to manuscripts in development and post
feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from
tons of other time-saving features.
O’Reilly Media has uploaded this book to the Safari Books Online service. To have full
digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at .

How to Contact Us
Please address comments and questions concerning this book to the publisher:
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
(800) 998-9938 (in the United States or Canada)
(707) 829-0515 (international or local)
(707) 829-0104 (fax)
We have a web page for this book, where we list errata, examples, and any additional
information. You can access this page at:
/>To comment or ask technical questions about this book, send email to:

For more information about our books, courses, conferences, and news, see our website
at .
Find us on Facebook: />Follow us on Twitter: />Watch us on YouTube: />
Acknowledgments
It takes a lot more than an author to get a book to print, so I’d like to thank the following
people:
• Simon St.Laurent, who was nothing but enthusiastic, encouraging, and helpful
throughout the development of this book.
• All those who contributed time and expertise to review the book—especially
Shelley Powers, who provided lots of insightful comments and suggestions.

xiv | Preface

www.it-ebooks.info


• My copyeditor, Rachel Monaghan, and others in the production staff who
smoothed out the last push to this book’s completion.
• The generous community of developers who freely share their work, hints, and tips
to help move the Web forward.
• My wife and daughter, Rebecca and Sofia, who were worried that my laptop had
become a permanent appendage.

Preface | xv

www.it-ebooks.info


www.it-ebooks.info

CHAPTER 1

Code Reuse and Optimization

JavaScript has an undeservedly dubious reputation. Many people have written about
its limitations as an object-oriented programming (OOP) language, even questioning
whether JavaScript is an OOP language at all (it is). Despite JavaScript’s apparent syntactic resemblance to class-based OOP languages like C++ and Java, there is no
Class statement (or equivalent) in JavaScript, nor any obvious way to implement popular OOP methodologies such as inheritance (code reuse) and encapsulation. JavaScript is also very loosely typed, with no compiler, and hence offers very few errors or
warnings when things are likely to go wrong. The language is too forgiving in almost
all instances, a trait that gives unsuspecting programmers a huge amount of freedom
on one hand, and a mile of rope with which to hang themselves on the other.
Programmers coming from more classic and strictly defined languages can be frustrated
by JavaScript’s blissful ignorance of virtually every programming faux pas imaginable:
global functions and variables are the default behavior, and missing semicolons are
perfectly acceptable (remember the rope mentioned in the previous paragraph?). Of
course, any frustration is probably due to a misunderstanding of what JavaScript is and
how it works. Writing JavaScript applications is much easier if programmers first accept
a couple of foundational truths:
• JavaScript is not a class-based language.
• Class-based OOP is not a prerequisite for writing good code.
Some programmers have attempted to mimic the class-based nature of languages like
C++ in JavaScript, but this is analogous to pushing a square peg into a round hole: it
can be done (sort of), but the end result can feel contrived.
No programming language is perfect, and one could argue that the perceived superiority
of certain programming languages (or indeed, the perceived superiority of OOP itself)
is a good example of the emperor’s new clothes.*In my experience, software written in
C++, Java, or PHP generates no fewer bugs or problems than projects created with
* />

1

www.it-ebooks.info


JavaScript. In fact (cautiously sticking my neck out), I might suggest that due to JavaScript’s flexible and expressive nature, you can develop projects in it more quickly than
in other languages.
Luckily, most of JavaScript’s shortcomings can be mitigated, not by forcibly contorting
it into the ungainly imitation of another language, but by taking advantage of its inherent flexibility while avoiding the troublesome bits. The class-based nature of other
languages can be prone to unwieldy class hierarchies and verbose clumsiness. JavaScript offers other inheritance patterns that are equally useful, but lighter-weight.
If there are many ways to skin a cat, there are probably even more ways to perform
inheritance in JavaScript, given its flexible nature. The following code uses prototypal
inheritance to create a Pet object and then a Cat object that inherits from it. This kind
of inheritance pattern is often found in JavaScript tutorials and might be regarded as a
“classic” JavaScript technique:
// Define a Pet object. Pass it a name and number of legs.
var Pet = function (name, legs) {
this.name = name; // Save the name and legs values.
this.legs = legs;
};
// Create a method that shows the Pet's name and number of legs.
Pet.prototype.getDetails = function () {
return this.name + ' has ' + this.legs + ' legs';
};
// Define a Cat object, inheriting from Pet.
var Cat = function (name) {
Pet.call(this, name, 4); // Call the parent object's constructor.
};
// This line performs the inheritance from Pet.
Cat.prototype = new Pet();

// Augment Cat with an action method.
Cat.prototype.action = function () {
return 'Catch a bird';
};
// Create an instance of Cat in petCat.
var petCat = new Cat('Felix');
var details = petCat.getDetails();
var action = petCat.action();
petCat.name = 'Sylvester';
petCat.legs = 7;
details = petCat.getDetails();

//
//
//
//
//

'Felix has 4 legs'.
'Catch a bird'.
Change petCat's name.
Change petCat's number of legs!!!
'Sylvester has 7 legs'.

The preceding code works, but it’s not particularly elegant. The use of the new statement
makes sense if you’re accustomed to other OOP languages like C++ or Java, but the
prototype keyword makes things more verbose, and there is no privacy; notice how

2 | Chapter 1: Code Reuse and Optimization

www.it-ebooks.info


petCat has its legs property changed to a bizarre value of 7. This method of inheritance
offers no protection from outside interference, a shortcoming that may be significant
in more complex projects with several programmers.

Another option is not to use prototype or new at all and instead take advantage
of JavaScript’s ability to absorb and augment instances of objects using functional
inheritance:
// Define a pet object. Pass it a name and number of legs.
var pet = function (name, legs) {
// Create an object literal (that). Include a name property for public use
// and a getDetails() function. Legs will remain private.
// Any local variables defined here or passed to pet as arguments will remain
// private, but still be accessible from functions defined below.
var that = {
name: name,
getDetails: function () {
// Due to JavaScript's scoping rules, the legs variable
// will be available in here (a closure) despite being
// inaccessible from outside the pet object.
return that.name + ' has ' + legs + ' legs';
}
};
return that;
};
// Define a cat object, inheriting from pet.
var cat = function (name) {
var that = pet(name, 4); // Inherit from pet.

// Augment cat with an action method.
that.action = function () {
return 'Catch a bird';
};
return that;
};
// Create an instance of cat in petCat2.
var petCat2 = cat('Felix');
details = petCat2.getDetails();
action = petCat2.action();
petCat2.name = 'Sylvester';
petCat2.legs = 7;
details = petCat2.getDetails();

//
//
//
//
//

'Felix has 4 legs'.
'Catch a bird'.
We can change the name.
But not the number of legs!
'Sylvester has 4 legs'.

There is no funny prototype business here, and everything is nicely encapsulated. More
importantly, the legs variable is private. Our attempt to change a nonexistent public
legs property from outside cat simply results in an unused public legs property being
created. The real legs value is tucked safely away in the closure created by the get

Details() method of pet. A closure preserves the local variables of a function—in this
case, pet()—after the function has finished executing.

Code Reuse and Optimization | 3

www.it-ebooks.info


In reality, there is no “right” way of performing inheritance with JavaScript. Personally,
I find functional inheritance a very natural way for JavaScript to do things. You and
your application may prefer other methods. Look up “JavaScript inheritance” in Google
for many online resources.
One benefit of using prototypal inheritance is efficient use of memory;
an object’s prototype properties and methods are stored only once, regardless of how many times it is inherited from.
Functional inheritance does not have this advantage; each new instance
will create duplicate properties and methods. This may be an issue if
you are creating many instances (probably thousands) of large objects
and are worried about memory consumption. One solution is to store
any large properties or methods in an object and pass this as an argument
to the constructor functions. All instances can then utilize the one object
resource rather than creating their own versions.

Keeping It Fast
The concept of “fast-moving JavaScript graphics” may seem like an oxymoron.
Truth be told, although the combination of JavaScript and a web browser is unlikely
to produce the most cutting-edge arcade software (at least for the time being), there is
plenty of scope for creating slick, fast-moving, and graphically rich applications, including games. The tools available are certainly not the quickest, but they are free,
flexible, and easy to work with.
As an interpreted language, JavaScript does not benefit from the many compile-time
optimizations that apply to languages like C++. While modern browsers have improved

their JavaScript performance enormously, there is still room to enhance the execution
speed of applications. It is up to you, the programmer, to decide which algorithms to
use, which code to improve, and how to manipulate the DOM in efficient ways. No
robot optimizer can do this for you.
A JavaScript application that only processes the occasional mouse click or makes the
odd AJAX call will probably not need optimization unless the code is horrendously
bad. The nature of applications covered in this book requires efficient code to give the
user a satisfactory experience—moving graphics don’t look good if they are slow and
jerky.
The rest of this chapter does not examine the improvement of page load times from
the server; rather, it deals with the optimization of running code that executes after the
server resources have loaded. More specifically, it covers optimizations that will be
useful in JavaScript graphics programming.

4 | Chapter 1: Code Reuse and Optimization

www.it-ebooks.info


What and When to Optimize
Of equal importance to optimization is knowing when not to do it. Premature optimization can lead to cryptic code and bugs. There is little point in optimizing areas of an
application that are seldom executed. It’s a good idea to use the Pareto principle, or
80–20 rule: 20% of the code will use 80% of the CPU cycles. Concentrate on this 20%,
10%, or 5%, and ignore the rest. Fewer bugs will be introduced, the majority of code
will remain legible, and your sanity will be preserved.
Using profiling tools like Firebug will quickly give you a broad understanding of which
functions are taking the most time to execute. It’s up to you to rummage around these
functions and decide which code to optimize. Unfortunately, the Firebug profiler is
available only in Firefox. Other browsers also have profilers, although this is not necessarily the case on older versions of the browser software.
Figure 1-1 shows the Firebug profiler in action. In the Console menu, select Profile to

start profiling, and then select Profile again to stop profiling. Firebug will then display
a breakdown of all the JavaScript functions called between the start and end points.
The information is displayed as follows:
Function
The name of the function called
Percent
Percentage of total time spent in the function
Call
How many times the function was called
Own time
Time spent within a function, excluding calls to other functions
Time
Total time spent within a function, including calls to other functions
Average
Average of Own times
Min
Fastest execution time of function
Max
Slowest execution time of function
File
The JavaScript file in which the function is located

What and When to Optimize | 5

www.it-ebooks.info


Figure 1-1. Firebug profiler in action

Being able to create your own profiling tests that work on all browsers can speed up

development and provide profiling capabilities where none exist. Then it is simply a
matter of loading the same test page into each browser and reading the results. This is
also a good way of quickly checking micro-optimizations within functions. Creating
your own profiling tests is discussed in the upcoming section “Homespun Code Profiling” on page 7.
Debuggers like Firebug can skew timing results significantly. Always
ensure that debuggers are turned off before performing your own timing
tests.

“Optimization” is a rather broad term, as there are several aspects to a web application
that can be optimized in different ways:
The algorithms
Does the application use the most efficient methods for processing its data? No
amount of code optimization will fix a poor algorithm. In fact, having the correct
6 | Chapter 1: Code Reuse and Optimization

www.it-ebooks.info


algorithm is one of the most important factors in ensuring that an application runs
quickly, along with the efficiency of DOM manipulation.
Sometimes a slow, easy-to-program algorithm is perfectly adequate if the application makes few demands. In situations where performance is beginning to suffer,
however, you may need to explore the algorithm being used.
Examining the many different algorithms for common computer science problems
such as searching and sorting is beyond the scope of this book, but these subjects
are very well documented both in print and online. Even more esoteric problems
relating to 3D graphics, physics, and collision detection for games are covered in
numerous books.
The JavaScript
Examine the nitty-gritty parts of the code that are called very frequently. Executing
a small optimization thousands of times in quick succession can reap benefits in

certain key areas of your application.
The DOM and jQuery
DOM plus jQuery can equal a brilliantly convenient way of manipulating web
pages. It can also be a performance disaster area if you fail to observe a few simple
rules. DOM searching and manipulation are inherently slow and should be minimized where possible.

Homespun Code Profiling
The browser environment is not conducive to running accurate code profiling. Inaccurate small-interval timers, demands from events, sporadic garbage collection, and
other things going on in the system all conspire to skew results. Typically, JavaScript
code can be profiled like this:
var startTime = new Date().getTime();
// Run some test code here.
var timeElapsed = new Date().getTime() - startTime;

Although this approach would work under perfect conditions, for reasons already stated, it will not yield accurate results, especially where the test code executes in a few
milliseconds.
A better approach is to ensure that the tests run for a longer period of time—say, 1,000
milliseconds—and to judge performance based on the number of iterations achieved
within that time. Run the tests several times so you can perform statistical calculations
such as mean and median.
To ensure longer-running tests, use this code:
// Credit: based on code by John Resig.
var startTime = new Date().getTime();
for (var iters = 0; timeElapsed < 1000; iters++) {
// Run some test code here.

Homespun Code Profiling | 7

www.it-ebooks.info