 |
Advanced JavaScript Tutorial Lesson 5 by Thau! |
| Page 6 —
Optimizing Your JavaScript for Speed
Once you've gotten your JavaScript working, you might want to get it working faster. Before I go into the ways to speed up your code, let me bend your ear about something called the 80/20 rule. You get 80 percent of the improvement of optimization with the first 20 percent of the work you do. Eking out that remaining 20 percent of speed is a huge pain, and often results in completely unreadable and difficult-to-manage code. In short, if your JavaScript is running slowly, there are a few very simple things you can do to speed it up, but unless your script is still really slow, I wouldn't bother optimizing beyond that. Here are a few easy methods of getting the lead out of your code.
The most common cause of a really slow program is repeated work inside a loop. If a command only needs to execute once, there's no reason to put it in a loop. For example:
var index = 0;
while (index <10)
{
var the_date = new Date();
var the_day = the_date.getDay();
var the_name = prompt("what's the kid's name? " ,"");
alert("On " + the_day + " " + the_name + " is a very special person.");
index++;
}
This program loops 10
times. Each time it figures out what day it
is, asks for a kid's name,
and then prints out "On Monday, so-and-so is a
very special
person."
But the day never changes. It's always today. So there's no need to put the first two lines inside the loop. Rather than execute them 10 times, pull them out of the loop and save time by executing them only once:
var index = 0;
var the_date = new Date();
var the_day = the_date.getDay();
while (index <10)
{
var the_name = prompt("what's the kid's name? " ,"");
alert("On " + the_day + " " + the_name + " is a very special person.");
index++;
}
1 Because if-then-else statements end once they've found something true, you can reduce the number of statements that execute by putting the ones most likely to be true first. For example:
var pet = prompt("what kind of pet do you have?", "");
if (pet == "cat")
{
doCatStuff();
} else if (pet == "dog")
{
doDogStuff();
} else if (pet == "bird")
{
doBirdStuff();
} else if (pet == "lizard")
{
doLizardStuff();
}
On average, this list
of if clauses will execute fewer logical tests than if it went
from lizard to dog.
If you find yourself repeatedly calculating a specific expression, like var pi = 22/7, it's probably a good idea to just calculate it once and access it as a global variable. For example, instead of this:
function theArea(radius)
{
var pi = 22/7;
var area = pi * radius * radius;
return area;
}
function theCircumference(radius)
{
var pi = 22/7;
var circumference = 2 * pi * radius;
return circumference;
}
do
this
var pi = 22/7;
function theArea(radius)
{
var area = pi * radius * radius;
return area;
}
function theCircumference(radius)
{
var circumference = 2 * pi * radius;
return circumference;
}
Yeah, I know that I'm using a
global variable here, and I said that
it was a bad idea. However, numbers
like pi, which will never change during your program, are the exception to
this rule. By calculating pi only once, you save an extra calculation. A
small savings
in time, perhaps, but it all adds up.
These are
just a few things you should look for if your code is too slow.
They're
pretty obvious, but you'd be surprised how often you can overlook simple
optimizations like these.
And that, my friends, brings us to the end of today's lesson, which in turn brings the entire Advanced JavaScript tutorial to a close. And if you've come this far, and you've read even half of the last five lessons, you've seen a lot of JavaScript. In fact, if you've understood most of what I've covered in the 10 lessons that span Parts I and II, you can safely call yourself a JavaScript acolyte. The road to true mastery now lies only with practice. |