Size Matters: Large HTML Select Lists Part 1

I am a believer in the 100K rule, no HTML page should be more than 100K in size, including images. This is a little on the big side for modem users, but loads quickly for DSL and Cable users. Now imaging that you are working on an HTML form that has very long select lists, with options numbering in the thousands. Now imagine that this same list, with same options is repeated multiple times on that page to allow the user to select multiple items. Of couse it seems like we should be using a select list with multiple selections allowed, but with a list so long this presents usability issues, which is why the select list is shown multiple times. Now imagine that the page weight is 1.7MB. Gasp! I will provide some solutions to this problem.

Check the Space Count

We first want to determine the number of spaces in the file. With this many options it is easy to accidentally use a lot of spaces for indenting, especially if the select list is generated dynamically. This Perl one-liner will give report on the number of leading spaces, as well as the number of newlines in the file.

$ perl -e 'while(<>){/^(\s+)/;$l++;$s+=length($1)}
print "speces: $s\nlines: $l\n"' TheFile.html;

speces: 9535
lines: 2322

Well, it looks like we have only 10K worth of spaces, which isn't much, but seeing that our goal is a 100K file, we will need to see if we can reduce that somewhat.

Look For Redundant Code

Next we want to look for anything that is redundant, which is a manual process. Spend five or ten minutes looking through the HTML code for anything that is used more than once. This might includes <font> tags, style attributes, and extra JavaScript code. If you have too many font tags, perhaps using CSS in their place will save you some space. If you are using a lot of style attributes, maybe you can save some space by using a CSS class. In our case, there is a JavaScript function that is repeated multiple times in the document, so we will fix the generating code so that it only returns a single copy of the routine. This saves us about 5K, again not much, but it is simple to reclaim.

Look for Redundant HTML

This is where we can save a lot of space. We have a select list with thousands of options, and most of the tag is repeated over and over. The sample below shows the repeated code in green.

<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>

We can replace this redundant code with some smart use of JavaScript.

<script src="js/prototype.js" type="text/javascript"></script>
<script type="text/javascript">

$('selectDiv').appendChild(newSelect('s1'));

var list = new Array('red', 'green', 'blue');

for (var i = 0; i <>
$('s1').appendChild(newOption(list[i], list[i]));
}

function newSelect (id)
{
var result = document.createElement('select');
result.setAttribute('id', id);
return result;
}

function newOption (val, name)
{
var result = document.createElement('option');
result.setAttribute('value', val);
result.appendChild(document.createTextNode(name));
return result;
}

</script>

Note that I am using the Prototype library, which makes things a little easier to do, and cleaner to code. The function $(id) returns the DOM node with the specified id, and $F(id) does the same for form elements making it easy to get and set values.

So this code, instead of using the tags, builds the DOM tree dynamically when the page is loaded. For a very long list this will save a lot of space. We are saving 24 characters for each option this way, for a savings of 24K per thousand options.

Also note that in our example list that the option values are the same as the option text. So not only are we saving space by reding redundant HTML code, but also by rem oving the redundant option values. In our exaple this saves us an addition 4 characters per option, but in practice this will most likely be a lot more.

In the next article I will get a little more creative with the JavaScript code to save a lot of additional space.