This chapter is from the book
This chapter is from the book
This chapter is from the book
Abbreviate and Map
Another JavaScript optimization technique you can use to crunch your code is abbreviation and mapping. Abbreviation in JavaScript is more flexible than in HTML. In JavaScript, you can name your variables, functions, and objects anything you want, but HTML requires a fixed set of tag names, although class and id names can be abbreviated.
So instead of this:
function validateParseAndEmail() var firstButton
Do this:
function email() var button1
Or even better:
function e() var b
Here's an example from WebReference.com's home page. Peter Belesis' original dual "news flipper" was self-describing (http://www.webreference.com/headlines/nh/). It was also over 6.7K and slowed down our home page.
So instead of this (single-feed version):
<script src="/scripts/newsflipper.js">
</head>
...(newsflipper.js file below)
arTopNews=[];
for(i=0;i<arTXT.length;i++) {
arTopNews[arTopNews.length] = arTXT[i];
arTopNews[arTopNews.length] = arURL[i];
}
TopPrefix=prefix;
function NSinit() {
fad1 = new Layer(119);
pos1 = document.anchors['pht1'];
pos1E = document.images['phb1'];
fad1.left = pos1.x;
fad1.top = pos1.y;
fad1.clip.width = 119;
fad1.clip.height = pos1E.y-fad1.top;
fad1.bgColor = "#ffed9a";
fad1.onmouseover = FDRmouseover;
fad1.onmouseout = FDRmouseout;
}
if (IE4) {
IEfad1.style.pixelHeight=IEfad1.offsetHeight;
IEfad1.onmouseover=FDRmouseover;
IEfad1.onmouseout=FDRmouseout;
}
function FDRmouseover() {
clearInterval(blendTimer);
}...
We manually abbreviated and optimized the code by over 50 percent to less than 3K and used SSI to add it to the end of the page, like this:
<!--#include virtual="/f.js" -->
</body>
... (f.js file below)
aTN=[];for(i=0;i<arTXT.length;i++){aTN[aTN.length]=arTXT[i];aTN[aTN.length]=arURL[i];}
tP=prefix;
function Ni(){fad1=new Layer(119);
dI=document.images;dA=document.anchors;
pos1=dA['pht1'];pos1E=dI['phb1'];fad1.left=pos1.x;fad1.top=pos1.y;fad1.clip.width=119;
fad1.clip.height=pos1E.y-fad1.top;fad1.bgColor="#ffed9a";
fad1.onmouseover=Fmv;fad1.onmouseout=Fmo;}
function Fmv(){clearInterval(bT);}...
Moving the script from an external file in the head to an SSI at the end of the page saves one HTTP request, displays the body content sooner, and raises relevance. Of course, these terse abbreviations can be hard to read. One solution is to create a map of names and their abbreviated counterparts either manually or automatically with an optimization program (such as index.jsmap). Here's an example:
email e button1 b
I have yet to see an optimizer that can abbreviate to user-defined maps (although I'm told some are in development). Some optimizers abbreviate variables and objects automatically, but you're stuck with what the program chooses.