jQuery: einzeln oder auf einmal anfügen + Selektoren? - jquery, Leistung

Ich baue ein jQuery UI Widget und wenn ichinitialisiere ich erstelle ein paar divs, anker, eingaben. Ich habe gelesen, dass es schneller ist, eine gesamte HTML-Zeichenfolge zu erstellen und sie dann an das DOM anzuhängen, als jedes einzelne DOM-Element anzuhängen.

Ich benötige jedoch später Zugriff auf diese Elemente.Deshalb bin ich auch geneigt, sie einzeln zu erstellen und sie dann anzuhängen, damit ich sie bereits zwischengespeichert habe, anstatt sie auszuwählen, nachdem ich den gesamten HTML-Code angehängt habe.

Was ist in der Regel schneller?

z.B.:

var html = $("<div id="container">.....several more divs, anchors and inputs all with IDs......</div>");

<dom element>.append(html);
this.container = $("#container");
this.search = $("#search");
...and so on

oder

this.container = $("<div id="container"></div>");
this.search = $("<input .... id="search" />");
...and the rest of the divs, anchors and inputs then...

<dom element>.append(this.container).append(this.search) ..... and so on

Antworten:

4 für die Antwort № 1

Ich schlage auch vor, diese beiden Blog-Beiträge zu lesen

Gründe für eine korrekte Verwendung von append ()

5 einfache Tipps zur Verbesserung der Codeleistung mit großen Datenmengen in jQuery

---

0 für die Antwort № 2

Dadurch wird ein DOM-Fragment erstellt, das ziemlich schnell ist. Viele von ihnen werden langsamer erstellt.

var html = $("<div id="container">.....several more divs, anchors and inputs all with IDs......</div>");

Sie können die Auswahl beschleunigen, indem Sie den begrenzten Kontext angeben, in dem sich die Elemente befinden.

this.container = html; //since #container is the top div in html, html = #container
this.search = html.find("#search");

Und schließlich zum DOM hinzufügen Dies ist der langsame Anhang, da der Browser neu gezeichnet wird.

<dom element>.append(html);

So erhalten Sie das gewünschte Ergebnis, ohne mehrere DOM-Fragmente erstellen zu müssen, die langsamer sind.

---