Microsoft KB Archive/255610

= PRB: CreateElement for SELECT Options Is Slow in Internet Explorer 5 =

Article ID: 255610

Article Last Modified on 5/11/2006

-

APPLIES TO


 * Microsoft Internet Explorer 5.0

-



This article was previously published under Q255610



SYMPTOMS
A page that adds a large number of option elements to a SELECT box by using createElement performs much more slowly in Internet Explorer 5 than in Internet Explorer 4.x.



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: 

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 " + i + " "; }

document.all("sel1Holder").innerHTML= "" + optStrings.join + " "; }





placeholder



STATUS
This behavior is by design.



Steps to Reproduce Behavior
  Insert the following code into a page named testSelectSpeed.htm:

Test OPTION Creation Speed



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); } }





 Load this file in both Internet Explorer 4 and Internet Explorer 5 and observe the timing difference.</li></ol>

<div class="references_section">