Registrations are now open. Join us today!
There is still a lot of work to do on the wiki yet! More information about editing can be found here.
Already have an account?

Microsoft KB Archive/255610

From BetaArchive Wiki

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:

<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>
                

STATUS

This behavior is by design.

MORE INFORMATION

Steps to Reproduce Behavior

  1. 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>
                        
  2. Load this file in both Internet Explorer 4 and Internet Explorer 5 and observe the timing difference.


REFERENCES

For more information about developing Web-based solutions for Microsoft Internet Explorer, visit the following Microsoft Web sites:

Keywords: kbieobj kbprb KB255610