wake-up-neo.com

Was ist der effizienteste Weg, um HTML-Elemente mit jQuery zu erstellen?

In letzter Zeit habe ich eine Menge modaler Fenster-Popups gemacht und was nicht, für die ich jQuery verwendet habe. Die Methode, mit der ich die neuen Elemente auf der Seite erstellt habe, war überwiegend wie folgt:

$("<div></div>");

Ich habe jedoch das Gefühl, dass dies nicht die beste oder effizienteste Methode ist. Wie lassen sich Elemente in jQuery aus Sicht der Leistung am besten erstellen?

Diese Antwort hat die Benchmarks zu den folgenden Vorschlägen.

417
Darko Z

Ich benutze $(document.createElement('div'));Benchmarking zeigt diese Technik ist die schnellste. Ich spekuliere, weil jQuery es nicht als Element identifizieren und das Element selbst erstellen muss.

Sie sollten wirklich Benchmarks mit verschiedenen Javascript-Engines ausführen und Ihr Publikum mit den Ergebnissen abwägen. Treffen Sie von dort aus eine Entscheidung.

304
strager

persönlich würde ich vorschlagen (für die Lesbarkeit):

$('<div>');

einige Zahlen zu den Vorschlägen (Safari 3.2.1/Mac OS X):

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms              
163
Owen

Frage:

Was ist der effizienteste Weg, um HTML-Elemente mit jQuery zu erstellen?

Antworten:

Da es um jQuery geht, denke ich, ist es besser, diesen (sauberen) Ansatz zu verwenden (Sie verwenden)

_$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');
_

DEMO.

Auf diese Weise können Sie sogar Ereignishandler für das jeweilige Element verwenden

_$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');
_

DEMO.

Wenn Sie jedoch mit vielen dynamischen Elementen arbeiten, sollten Sie das Hinzufügen von event handlers in einem bestimmten Element vermeiden. Stattdessen sollten Sie einen delegierten Ereignishandler wie verwenden

_$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}
_

DEMO.

Wenn Sie also Hunderte von Elementen mit derselben Klasse erstellen und anfügen, d. H. (myClass), wird weniger Speicher für die Ereignisbehandlung benötigt, da nur ein Handler für alle dynamisch eingefügten Elemente zur Verfügung steht.

Update: Da wir folgenden Ansatz verwenden können, um ein dynamisches Element zu erstellen

_$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");
_

Das size -Attribut kann mit diesem Ansatz jedoch nicht mit _jQuery-1.8.0_ oder höher festgelegt werden. Hier ist ein alter Fehlerbericht , siehe dieses Beispiel = Verwenden von _jQuery-1.7.2_, was zeigt, dass das size -Attribut unter Verwendung des obigen Beispiels auf _30_ gesetzt ist, aber unter Verwendung desselben Ansatzes können wir das size -Attribut nicht unter Verwendung von _jQuery-1.8.3_ setzen. Hier ist eine nicht funktionierende Geige . Um das size Attribut zu setzen, können wir folgenden Ansatz verwenden

_$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");
_

Oder dieses

_$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");
_

Wir können _attr/prop_ als untergeordnetes Objekt übergeben, aber es funktioniert in _jQuery-1.8.0 and later_ Versionsprüfung dieses Beispiel aber es wird nicht funktionieren in _jQuery-1.7.2 or earlier_ (nicht in allen früheren Versionen getestet).

Übrigens, entnommen aus jQuery Fehlerbericht

Es gibt verschiedene Lösungen. Das erste ist, es überhaupt nicht zu verwenden, da es Ihnen keinen Platz spart und dies die Klarheit des Codes verbessert:

Es wurde empfohlen, den folgenden Ansatz zu verwenden ( funktioniert auch in früheren Versionen , getestet in _1.6.4_)

_$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");
_

Es ist also besser, diesen Ansatz zu verwenden, IMO. Dieses Update wird durchgeführt, nachdem ich diese Antwort gelesen/gefunden habe, und in dieser Antwort wird gezeigt, dass, wenn Sie 'Size'(capital S) anstelle von _'size'_ verwenden, es nur funktioniert) fein , auch in _version-2.0.2_

_$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');
_

Lesen Sie auch über prop , da es einen Unterschied gibt, _Attributes vs. Properties_, variiert er je nach Version.

152
The Alpha

Wenn Sie $('<div>') ausführen, verwendet jQuery auch document.createElement().

(Schauen Sie sich einfach Zeile 117 an.).

Es gibt einen gewissen Funktionsaufruf-Overhead, aber es sei denn, die Leistung ist kritisch (Sie erstellen Hunderte [Tausende] von Elementen), gibt es nicht viel Grund, auf Plain [~ # ~] zurückzukehren. dom [~ # ~] .

Das Erstellen von Elementen für eine neue Webseite ist wahrscheinlich ein Fall, bei dem Sie sich am besten an die jQuery-Methode halten.

37
edwin

Dies ist nicht die richtige Antwort auf die Frage, aber trotzdem möchte ich dies teilen ...

Wenn Sie nur document.createElement('div') verwenden und JQuery überspringen, wird die Leistung erheblich verbessert, wenn Sie viele Elemente im laufenden Betrieb erstellen und an DOM anhängen möchten.

20
Irshad

Wenn Sie viel HTML-Inhalt haben (mehr als nur ein Div), können Sie den HTML-Inhalt in die Seite eines versteckten Containers integrieren, ihn dann aktualisieren und bei Bedarf sichtbar machen. Auf diese Weise kann ein großer Teil Ihres Markups vom Browser vorab analysiert werden, sodass JavaScript beim Aufrufen nicht blockiert. Hoffe das hilft!

20
Collin Allen

Ich denke, Sie verwenden die beste Methode, obwohl Sie sie optimieren können, um:

 $("<div/>");
16
tvanfosson

Sie benötigen keine Rohleistung für eine Operation, die Sie aus Sicht der CPU äußerst selten ausführen.

11
yfeldblum

Sie müssen verstehen, dass die Bedeutung der Leistung bei der Elementerstellung im Zusammenhang mit der erstmaligen Verwendung von jQuery keine Rolle spielt.

Denken Sie daran, dass es keinen wirklichen Zweck gibt, ein Element zu erstellen, es sei denn, Sie werden es tatsächlich verwenden.

Sie könnten versucht sein, etwas wie $(document.createElement('div')) gegen $('<div>') zu testen und durch die Verwendung von $(document.createElement('div')) große Leistungssteigerungen zu erzielen, aber das ist nur ein Element, das nicht in der Liste enthalten ist DOM schon.

Am Ende des Tages sollten Sie das Element jedoch trotzdem verwenden, sodass der eigentliche Test beispielsweise Folgendes enthalten sollte. .Anhängen();

Mal sehen, ob Sie folgendes gegeneinander testen:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

Sie werden feststellen, dass die Ergebnisse variieren. Manchmal ist ein Weg leistungsfähiger als der andere. Dies liegt nur daran, dass sich die Anzahl der Hintergrundaufgaben auf Ihrem Computer im Laufe der Zeit ändert.

Testen Sie sich hier

Letztendlich möchten Sie also die kleinste und am besten lesbare Methode zum Erstellen eines Elements auswählen. Auf diese Weise werden zumindest Ihre Skriptdateien so klein wie möglich sein. Wahrscheinlich ein wichtigerer Faktor für die Leistung als die Art und Weise, wie ein Element erstellt wird, bevor Sie es im DOM verwenden.

9

Jemand hat bereits einen Benchmark erstellt: Entspricht jQuery document.createElement?

$(document.createElement('div')) ist der große Gewinner.

8

Ein Punkt ist, dass es einfacher sein kann:

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

Dann machen Sie das alles mit jquery-Aufrufen.

7
Tobiah

Ich benutze jquery.min v2.0.3. Es ist für mich besser, folgendes zu verwenden:

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

wie folgt:

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

Die Verarbeitungszeit des ersten Codes ist viel kürzer als die des zweiten Codes.

3
Marcel GJS