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

In letzter Zeit habe ich viele modale Fenster-Popups erstellt 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. Was ist der beste Weg, um Elemente in jQuery aus Sicht der Leistung zu erstellen?

Diese Antwort enthält die Benchmarks für die folgenden Vorschläge.

Ich benutze $(document.createElement('div')); Benchmarking zeigt, dass diese Technik die schnellste ist. 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 Ihre Zielgruppe mit den Ergebnissen abwägen. Treffen Sie von dort aus eine Entscheidung.

persönlich würde ich vorschlagen (zur besseren Lesbarkeit):

$('<div>');

Einige Zahlen zu den bisherigen 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              

Frage:

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

Antworten:

Da es ungefähr jQuerydann ist, denke ich, ist es besser, diesen (sauberen) Ansatz zu verwenden (den 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 wie 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 eines Ereignisses handlersin 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 anhängen, dh ( 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 den folgenden Ansatz verwenden können, um ein dynamisches Element zu erstellen

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

Das sizeAttribut kann jedoch nicht mit diesem Ansatz jQuery-1.8.0oder später festgelegt werden. Hier ist ein alter Fehlerbericht . Sehen Sie sich dieses Beispiel an , jQuery-1.7.2das zeigt, dass das sizeAttribut auf 30das obige Beispiel eingestellt ist, aber denselben Ansatz verwendet, mit dem wir das sizeAttribut jQuery-1.8.3hier nicht festlegen können ist eine nicht funktionierende Geige . Um das sizeAttribut festzulegen, können wir den 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/propals untergeordnetes Objekt übergeben, aber es funktioniert in jQuery-1.8.0 and laterVersionen. Überprüfen Sie dieses Beispiel, aber es funktioniert nicht in jQuery-1.7.2 or earlier(nicht in allen früheren Versionen getestet).

Übrigens, aus dem jQueryFehlerbericht entnommen

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:

Sie rieten zu folgendem Ansatz ( funktioniert auch in früheren , 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 , nachdem ich gelesen / gefunden diese Antwort und in dieser Antwort zeigt , dass , wenn Sie verwenden , 'Size'(capital S)anstatt 'size'es dann wird nur gut funktionieren , auch inversion-2.0.2

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

Lesen Sie auch über Requisiten , da es einen Unterschied gibt Attributes vs. Properties, der von Version zu Version unterschiedlich ist.

Wenn Sie dies tun $('<div>'), wird jQuery auch verwendet document.createElement().

(Schauen Sie sich einfach Zeile 117 an. )

Es gibt einen gewissen Aufwand für Funktionsaufrufe, aber wenn die Leistung nicht kritisch ist (Sie erstellen Hunderte [Tausende] von Elementen), gibt es nicht viel Grund, auf einfaches DOM zurückzugreifen .

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

Wenn Sie viel HTML-Inhalt haben (mehr als nur ein einziges Div), können Sie den HTML-Code in die Seite in einem versteckten Container einbauen, ihn dann aktualisieren und bei Bedarf sichtbar machen. Auf diese Weise kann ein großer Teil Ihres Markups vom Browser vorab analysiert werden, um zu vermeiden, dass JavaScript beim Aufrufen ins Stocken gerät. Hoffe das hilft!

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

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

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

 $("<div/>");

Sie benötigen keine Rohleistung für einen Vorgang, den Sie aus Sicht der CPU äußerst selten ausführen.

Sie müssen verstehen, dass die Bedeutung der Leistung bei der Elementerstellung für die Verwendung von jQuery in erster Linie irrelevant ist.

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, Leistungstests wie $(document.createElement('div'))vs. zu testen $('<div>')und durch die Verwendung große Leistungssteigerungen zu erzielen, $(document.createElement('div'))aber das ist nur ein Element, das noch nicht im DOM enthalten ist.

Am Ende des Tages sollten Sie das Element jedoch trotzdem verwenden, sodass der eigentliche Test f.ex 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 besser 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. Wahrscheinlich ein wichtigerer Faktor für den Leistungspunkt als die Art und Weise, wie ein Element erstellt wird, bevor Sie es im DOM verwenden.

Jemand hat bereits einen Benchmark erstellt: jQuery document.createElement-Äquivalent?

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

Ein Punkt ist, dass es einfacher sein kann:

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

Dann, um all das mit jquery-Aufrufen zu tun.

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.