JavaScript Size Problem

[engelman]

Hello,

I’d appreciate any help anyone can offer on the following problem.

I have a JavaScript function that loads a city combo box with all cities in the state chosen in an associated state combo box. The function is about 825KB, and downloads very slowly. I’ve tried some of the publicly available JavaScript compressors, which only resulted in a small percentage file size reduction. I’ve also tried a JavaScript compiler, which did achieve a very high space reduction percentage, but unfortunately takes a long time to unpack once downloaded.

Does anyone have any ideas? I’m open to any alternative. Perhaps there are some very good JavaScript compressors or compilers that I’m unaware of. I’d appreciate any advice in this area.

Also, does anyone know if it’s possible to run machine code from MSIE? In theory, I could convert the JavaScript function to fully compiled machine code (such as Visual Basic). I don’t know if IE could run such code. I’d also appreciate any comments relative to this idea.

Thanks very much, Stewart Engelman

[Rick Bull]

Can we see the code? Maybe you just have some ineffiecient JavaScript. Seems like a lot for just loading cities.

[jalarie]

How about only downloading the states to begin with and then link back to the server to get the cities once a state is selected? This would cut the size of the download by about a factor of fifty.

[engelman]

Hello,

I've attached the code in a zip archive. Please unzip and then review.

Re the comment on doing server calls for the cities, this would certainly solve the size problem. I thought about doing this, but hope to avoid it due to the distracting "blip" the user will experience as the page reloads after each state change.

Stu

[Rick Bull]

Wow I can see why this is so big. What I would do instead is make a function that adds options to a select box, then pass an array into it something like this:


function addOptions(optionsText, optionsValue) {
for (var loopCounter = 0; loopCounter < optionsText.length; loopCounter++) {
var opt=document.createElement("OPTION");
window.lstCity.options.add(opt);
opt.text=optionsText[loopCounter];
opt.value=optionsValue[loopCounter];
}
}


then for each state something like this:


switch (st) {
case "AK":
var optionsText = array("Anchorage","Elmendorf AFB","Fairbanks");
var optionsValue = array("99508/99516","99506","99701/99709");
addOptions(optionsText,optionsValue);
break;


Obviously you would need to add all the values into each array. You could do further stuff to cut down the amount of code, but it's too much effort for someone as lazy as me to do that. The best solutions is probably what jalarie said, as that way it should work for everyone. The way you are doing it now could break in a lot of browsers. :(

[Zach Elfers]

MSIE and most major browsers support Visual Basic Scripting.

[gil davis]

Originally posted by Zach Elfers
MSIE and most major browsers support Visual Basic Scripting.

Where, pray tell, did you get *that* idea? Define "most major browsers".

[Rick Bull]

I think he meant JavaScript, but that's not really the point. All I meant was that if engelman were to go with the non-JS solution it would work for more browsers, which is obviously preferable.

[Vladdy]

First define the city object:

function c(name,zip)
{ this.name=name;
this.zip=zip;
}

Then define states array and populate it:

var s = new Array();
s["AK"] = new Array(
new c('Anchorage','99508/99516'),
new c(...,...),
);
s["..."] = new Array(
...
)
// and so on...

then for your ReloadCities do the following:

function ReloadCities(st)
{ cbox = document.getElementById('MyForm').elements['Cities'];
while(cBox.options[0]) cBox.options.remove(0);
for(i=0; i<s[st].length; i++)
{ option = document.createElement('option');
option.text = s[st][i].name;
option.value = s[st][i].zip;
cbox.add(option);
}
return;
}

I bet the file size will be under 100k