Chrome Loads Slow on Large Selects
<p>In my HTML page I have a <code>&lt;select&gt;</code> element with thousands of <code>&lt;option&gt;</code> elements, which are generated in the JSP. </p>

<p>When the page loads in IE and in Firefox it loads pretty quickly, however when loading in Chrome the load time is significantly longer. (It can take up to a minute.) I replaced the <code>&lt;select&gt;</code> and <code>&lt;option&gt;</code> elements with <code>&lt;div&gt;</code> tags, and surprisingly, it loaded much quicker (within a few seconds). </p>

<p>After inspecting the timeline in dev tools I noticed that when I use the options, the 'loading' time is very long - specifically the <code>parseHTML</code> (seen in the Event Log). However, when I replaced the select with divs the loading time was just a few milliseconds. The rendering was actually longer (as said before it wasn't very long) than the loading, and interestingly - it was longer than the rendering for options.</p>

<p>I would love to understand the following:</p>

<ul>
<li>What is the exact difference between rendering and loading - specifically <code>parseHTML</code>?</li>
<li>Why is it that divs act differently than options?</li>
<li>Most importantly, how can i use the select without using select2 or other dynamically loading select boxes, and still get good loading time?</li>
</ul>

<p><strong>Update</strong></p>

<p>After some playing around i discovered how to fix it but i was left more perplexed than before.</p>

<p>I created two JSPs ,one with the size attribute specified, and one without.</p>

<pre><code>    &lt;select size="10"&gt;
    &lt;%                  
    for(int i = 0; i&lt; 60000; i++){ %&gt;
        &lt;option value="&lt;%=i%&gt;"&gt;&lt;%=i%&gt;&lt;/option&gt;
    &lt;%} %&gt;&lt;/select&gt;
</code></pre>

<p>The one with the size attribute took about 2 minutes, while the one without took only 10 seconds!!!</p>

<p>Here too, I inspected the Timeline, and - as before - the one with the size had the 'loading' event (<code>parseHTML</code>) taking up 80% of the loading time and took 99 seconds long, while the one without the size had the 'loading' event taking only 3% of loading time, (465 ms) with the 'rendering' taking up 75% of the loading time (7.8 seconds).</p>

<p>It's possibly a bug in chrome, however i would love to understand what's going on here.</p>

<p>P.S. I know its not a good idea to use scriplets in JSP, this is just for testing purposes, also this issue is not connected to JSP in particular, but rather a general HTML issue.</p>