Microsoft KB Archive/255610: Difference between revisions
(importing KB archive) |
m (Text replacement - "<" to "<") |
||
Line 56: | Line 56: | ||
<br /> | <br /> | ||
The following code demonstrates these techniques: | The following code demonstrates these techniques: | ||
<pre class="codesample"> | <pre class="codesample"><SCRIPT> | ||
function load() { | function load() { | ||
Line 63: | Line 63: | ||
//Add results to output combo | //Add results to output combo | ||
for(i=0; i | for(i=0; i <= 8000; i++) { | ||
optStrings[parseInt(i / 100)] = optStrings[parseInt(i / 100)] + " | optStrings[parseInt(i / 100)] = optStrings[parseInt(i / 100)] + "<option value=\"" + i + "\">" + "Option " + i + "</option>"; | ||
} | } | ||
document.all("sel1Holder").innerHTML= " | 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> | |||
</pre> | </pre> | ||
Line 103: | Line 103: | ||
<ol> | <ol> | ||
<li><p>Insert the following code into a page named testSelectSpeed.htm:</p> | <li><p>Insert the following code into a page named testSelectSpeed.htm:</p> | ||
<pre class="codesample"> | <pre class="codesample"><html> | ||
<head> | |||
<title>Test OPTION Creation Speed</title> | |||
<SCRIPT> | |||
function load() { | function load() { | ||
for (var i = 0; i | for (var i = 0; i < 2000; i++) { | ||
var obj = document.createElement("OPTION"); | var obj = document.createElement("OPTION"); | ||
obj.value = i; | obj.value = i; | ||
Line 119: | Line 119: | ||
} | } | ||
</SCRIPT> | |||
</head> | |||
<body onload="load();"> | |||
<form name="frm1"> | |||
<select name="sel1"> | |||
</select> | |||
</form> | |||
</body> | |||
</html> | |||
</pre></li> | </pre></li> | ||
<li>Load this file in both Internet Explorer 4 and Internet Explorer 5 and observe the timing difference.</li></ol> | <li>Load this file in both Internet Explorer 4 and Internet Explorer 5 and observe the timing difference.</li></ol> |
Revision as of 08:01, 21 July 2020
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
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.
REFERENCES
For more information about developing Web-based solutions for Microsoft Internet Explorer, visit the following Microsoft Web sites:
Keywords: kbieobj kbprb KB255610