Wie lassen sich HTML-Elemente mit jQuery am effizientesten erstellen?

Question

In letzter Zeit habe ich eine Menge von modalen Fenster Pop-ups und was nicht, für die ich jQuery verwendet. Die Methode, die ich verwendet, um die neuen Elemente auf der Seite zu erstellen hat überwältigend entlang der Linien der gewesen:

$("<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 von einer Leistung Perspektive zu erstellen?

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

Answer 1

Wenn Sie viel HTML-Inhalt haben (mehr als nur ein einzelnes div), könnten Sie in Erwägung ziehen, den HTML-Inhalt in einem versteckten Container in die Seite einzubauen, ihn dann zu aktualisieren und bei Bedarf sichtbar zu machen. Auf diese Weise kann ein großer Teil Ihres Markups vom Browser vorparsed werden und wird beim Aufruf nicht durch JavaScript verzögert. Ich hoffe, das hilft!

Answer 2

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

 $("<div/>");

Answer 3

Sie brauchen keine Rohleistung für einen Vorgang, den Sie aus Sicht der CPU extrem selten durchführen werden.

Answer 4

Jemand hat bereits ein Benchmarking durchgeführt: jQuery document.createElement gleichwertig?

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

Answer 5

Sie müssen verstehen, dass die Bedeutung der Leistung der Elementerstellung im Zusammenhang mit der Verwendung von jQuery in erster Linie irrelevant ist.

Denken Sie daran, dass es keinen wirklichen Sinn hat, ein Element zu erstellen, wenn Sie es nicht tatsächlich verwenden wollen.

Sie könnten versucht sein, einen Leistungstest wie $(document.createElement('div')) vs. $('<div>') und erhalten große Leistungsgewinne durch die Verwendung von $(document.createElement('div')) aber das ist nur ein Element, das noch nicht im DOM enthalten ist.

Letzten Endes werden Sie das Element jedoch ohnehin verwenden wollen, so dass der eigentliche Test z. B. .appendTo() umfassen sollte;

Testen Sie die folgenden Punkte gegeneinander:

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 unterschiedlich ausfallen werden. Manchmal ist die eine Methode erfolgreicher als die andere. Und das liegt nur daran, dass sich die Menge der Hintergrundaufgaben auf Ihrem Computer mit der Zeit ändert.

Testen Sie sich hier

Letzten Endes sollten Sie also die kleinste und am besten lesbare Art und Weise wählen, ein Element zu erstellen. Auf diese Weise werden zumindest Ihre Skriptdateien so klein wie möglich sein. Dies ist wahrscheinlich ein wichtigerer Faktor für die Leistung als die Art und Weise, wie ein Element erstellt wird, bevor es im DOM verwendet wird.