Chrome Loads langsame auf große wählt

Question

In meiner HTML-Seite habe ich ein <select> Element mit Tausenden von <option> Elemente, die in der JSP generiert werden.

Wenn die Seite in IE und in Firefox geladen wird, lädt sie ziemlich schnell, aber beim Laden in Chrome ist die Ladezeit wesentlich länger. (Es kann bis zu einer Minute dauern.) Ich ersetzte die <select> und <option> Elemente durch <div> Tags, und überraschend, es geladen viel schneller (innerhalb weniger Sekunden).

Nach der Inspektion der Timeline in Dev-Tools habe ich festgestellt, dass, wenn ich die Optionen verwende, die Ladezeit sehr lang ist - speziell die parseHTML (im Ereignisprotokoll zu sehen). Als ich jedoch die Auswahl durch divs ersetzte, betrug die Ladezeit nur ein paar Millisekunden. Das Rendering war tatsächlich länger (wie gesagt, es war nicht sehr lang) als das Laden und interessanterweise - es war länger als das Rendern für Optionen.

Ich würde gerne folgendes verstehen:

• Was ist der genaue Unterschied zwischen Rendering und Laden - speziell parseHTML?
• Warum agieren divs anders als Optionen?
• Am wichtigsten, wie kann ich die select ohne select2 oder andere dynamisch ladende Auswahlfelder verwenden, und trotzdem gute Ladezeit bekommen?

aktualisieren

Nach einigem Herumspielen entdeckte ich, wie es zu beheben, aber ich war mehr perplex links als zuvor.

Ich habe zwei JSPs erstellt, eine mit dem angegebenen Größenattribut und eine ohne.

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

Der eine mit dem Größenattribut dauerte ungefähr 2 Minuten, während der eine ohne 10 Sekunden dauerte !!!

Auch hier habe ich die Timeline inspiziert, und - wie zuvor - hatte das 'loading' Event (parseHTML) 80% der Ladezeit und dauerte 99 Sekunden, während das eine ohne die Größe hatte das 'loading'-Ereignis nur 3% der Ladezeit (465 ms), wobei das' rendering '75% der Ladezeit (7,8 Sekunden) in Anspruch nahm.

Es ist möglicherweise ein Fehler in Chrome, aber ich würde gerne verstehen, was hier vor sich geht.

P.S. Ich weiß, es ist keine gute Idee, Scriplets in JSP zu verwenden, das ist nur für Testzwecke, auch dieses Problem ist nicht speziell mit JSP verbunden, sondern eher ein generelles HTML-Problem.

Answer 1

Ich konfrontiert das gleiche Problem. Das dynamische Hinzufügen der Optionen mit der onclick-Methode hat das Problem gelöst. Die Seite wird schnell geladen und die Optionen werden nur hinzugefügt, wenn der Benutzer darauf klickt.

<SELECT name='xyz' onclick="addOptions(this) " > 
<option value='abcd' SELECTED > text </option> 
<!-- so that atleast one option is visible. -->  
</SELECT> 

function addOptions (element) 
{ 
    /// some loop 
    { 
     var option = document.createElement("option"); 
     option.value = carrierCodeTypeMemberCodes[carOptions] ; 
     option.text = carrierCodeTypeMemberValues[carOptions]; 
     element.add(option); 
    } 
    element.click(); //// This is required to refresh the select box. 
}