Microsoft KB Archive/255610: Difference between revisions

From BetaArchive Wiki
(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">&lt;SCRIPT&gt;
<pre class="codesample"><SCRIPT&gt;


function load() {
function load() {
Line 63: Line 63:


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


     document.all(&quot;sel1Holder&quot;).innerHTML=  &quot;&lt;select id=cmbBig&gt;&quot; + optStrings.join() + &quot;&lt;/select&gt;&quot;;
     document.all(&quot;sel1Holder&quot;).innerHTML=  &quot;<select id=cmbBig&gt;&quot; + optStrings.join() + &quot;</select&gt;&quot;;
}
}


&lt;/SCRIPT&gt;
</SCRIPT&gt;


&lt;body onload=&quot;load();&quot;&gt;
<body onload=&quot;load();&quot;&gt;


&lt;form id=&quot;frm1&quot;&gt;
<form id=&quot;frm1&quot;&gt;


&lt;span id=&quot;sel1Holder&quot;&gt;
<span id=&quot;sel1Holder&quot;&gt;
&lt;select name=&quot;sel1&quot;&gt;
<select name=&quot;sel1&quot;&gt;
&lt;option&gt;placeholder&lt;/option&gt;
<option&gt;placeholder</option&gt;
&lt;/select&gt;
</select&gt;
&lt;/span&gt;
</span&gt;


&lt;/form&gt;
</form&gt;


&lt;/body&gt;
</body&gt;
                 </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">&lt;html&gt;
<pre class="codesample"><html&gt;


&lt;head&gt;
<head&gt;
&lt;title&gt;Test OPTION Creation Speed&lt;/title&gt;
<title&gt;Test OPTION Creation Speed</title&gt;


&lt;SCRIPT&gt;
<SCRIPT&gt;


function load() {
function load() {
     for (var i = 0; i &lt; 2000; i++) {
     for (var i = 0; i < 2000; i++) {
         var obj = document.createElement(&quot;OPTION&quot;);
         var obj = document.createElement(&quot;OPTION&quot;);
         obj.value = i;
         obj.value = i;
Line 119: Line 119:
}
}


&lt;/SCRIPT&gt;
</SCRIPT&gt;


&lt;/head&gt;
</head&gt;


&lt;body onload=&quot;load();&quot;&gt;
<body onload=&quot;load();&quot;&gt;


&lt;form name=&quot;frm1&quot;&gt;
<form name=&quot;frm1&quot;&gt;


&lt;select name=&quot;sel1&quot;&gt;
<select name=&quot;sel1&quot;&gt;
&lt;/select&gt;
</select&gt;


&lt;/form&gt;
</form&gt;


&lt;/body&gt;
</body&gt;


&lt;/html&gt;
</html&gt;
                     </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

  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