PRB: CreateElement() for SELECT Options Is Slow in Internet Explorer 5 (255610)

RESOLUTION

Creating the raw HTML for the SELECT box dynamically and adding it to a DIV or SPAN on the page yields superior performance under Internet Explorer 5. But there is only one caveat in using this method: When concatenating HTML text, the string handling for a large number of elements gets slower and slower as the string gets longer. To reduce this performance hit, use an array to hold smaller portions of the string when adding more than about a thousand options.

You may want to do a browser version test and use createElement() for Internet Explorer 4 and for Internet Explorer 5 concatenate the text for the HTML to write out a select box on the fly. Using innerHTML in Internet Explorer 4 results in only a slight performance degradation over createElement (on the order of several seconds for thousands of OPTIONs), so this decision should be made on a case-by-case basis.

The following code demonstrates these techniques:

<SCRIPT>

function load() {
    var optStrings = new Array(8000/100);
    var i;

    //Add results to output combo
    for(i=0; i <= 8000; i++) {
        optStrings[parseInt(i / 100)] = optStrings[parseInt(i / 100)] + "<option value=\"" + i + "\">" + "Option " + i + "</option>";
    }

     document.all("sel1Holder").innerHTML=  "<select id=cmbBig>" + optStrings.join() + "</select>";
}

</SCRIPT>

<body onload="load();">

<form id="frm1">

<span id="sel1Holder">
<select name="sel1">
<option>placeholder</option>
</select>
</span>

</form>

</body>

MORE INFORMATION

Steps to Reproduce Behavior

Insert the following code into a page named testSelectSpeed.htm:

<html>

<head>
<title>Test OPTION Creation Speed</title>

<SCRIPT>

function load() {
	for (var i = 0; i < 2000; i++) {
		var obj = document.createElement("OPTION");
		obj.value = i;
		obj.text = "Option Number " + i;
		document.all.sel1.add(obj);
	}
}

</SCRIPT>

</head>

<body onload="load();">

<form name="frm1">

<select name="sel1">
</select>

</form>

</body>

</html>

Load this file in both Internet Explorer 4 and Internet Explorer 5 and observe the timing difference.

PRB: CreateElement() for SELECT Options Is Slow in Internet Explorer 5 (255610)

SYMPTOMS

RESOLUTION

STATUS

MORE INFORMATION

Steps to Reproduce Behavior

REFERENCES