Jaki jest najskuteczniejszy sposób tworzenia elementów HTML za pomocą jQuery?

Ostatnio robiłem wiele modalnych okien pop-up i co nie, do czego użyłem jQuery. Metoda, której użyłem do utworzenia nowych elementów na stronie, była w przeważającej mierze następująca:

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

Mam jednak wrażenie, że nie jest to najlepsza ani najwydajniejsza metoda tego. Jaki jest najlepszy sposób tworzenia elementów w jQuery z perspektywy wydajności?

Ta odpowiedź zawiera punkty odniesienia do poniższych sugestii.

Używam $(document.createElement('div')); testów porównawczych pokazuje, że ta technika jest najszybsza. Spekuluję, że dzieje się tak, ponieważ jQuery nie musi identyfikować go jako elementu i sam tworzyć elementu.

Powinieneś naprawdę przeprowadzić testy porównawcze z różnymi silnikami Javascript i zważyć wyniki swoich odbiorców. Podejmij decyzję stamtąd.

osobiście sugerowałbym (dla czytelności):

$('<div>');

niektóre liczby dotyczące dotychczasowych sugestii (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              

Pytanie:

Jaki jest najskuteczniejszy sposób tworzenia elementów HTML za pomocą jQuery?

Odpowiedź:

Ponieważ chodzi o jQueryto, myślę, że lepiej jest zastosować to (czyste) podejście (używasz)

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

PRÓBNY.

W ten sposób można nawet używać procedur obsługi zdarzeń dla określonego elementu, takiego jak

$('<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');

PRÓBNY.

Ale gdy masz do czynienia z wieloma elementami dynamicznymi, powinieneś unikać dodawania zdarzenia handlersdo konkretnego elementu, zamiast tego powinieneś użyć delegowanego modułu obsługi zdarzeń, takiego jak

$(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');
}

PRÓBNY.

Tak więc, jeśli utworzysz i dodasz setki elementów o tej samej klasie, tj. ( myClass), Wówczas zajmie się mniej pamięci do obsługi zdarzeń, ponieważ tylko jeden moduł obsługi będzie mógł wykonać zadanie dla wszystkich dynamicznie wstawianych elementów.

Aktualizacja: Ponieważ możemy użyć następującego podejścia do utworzenia elementu dynamicznego

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

Ale tego sizeatrybutu nie można ustawić za pomocą tego podejścia za pomocą jQuery-1.8.0lub później, a oto stary raport o błędach , spójrz ten przykład za pomocą, jQuery-1.7.2który pokazuje, że sizeatrybut jest ustawiony na 30powyższy przykład, ale za pomocą tego samego podejścia, którego nie możemy ustawić sizeza pomocą atrybutu jQuery-1.8.3, tutaj to niedziałające skrzypce . Aby ustawić sizeatrybut, możemy zastosować następujące podejście

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

Albo ten

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

Możemy przekazać attr/propjako obiekt podrzędny, ale to działa w jQuery-1.8.0 and laterwersjach sprawdzić ten przykład , ale to nie będzie działać w jQuery-1.7.2 or earlier(nie testowane we wszystkich wcześniejszych wersjach).

BTW, wzięte z jQueryraportu o błędzie

Istnieje kilka rozwiązań. Po pierwsze, wcale go nie używaj, ponieważ nie oszczędza to miejsca, a to poprawia przejrzystość kodu:

Zalecili stosowanie następującego podejścia ( działa również we wcześniejszych , przetestowano w 1.6.4)

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

Lepiej więc zastosować to podejście, IMO. Ta aktualizacja jest wykonywana po przeczytaniu / znalezieniu tej odpowiedzi, a ta odpowiedź pokazuje, że jeśli używasz'Size'(capital S) zamiast 'size'niej, będzie ona działać dobrze , nawet wversion-2.0.2

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

Przeczytaj także o rekwizytach , ponieważ istnieje różnica,Attributes vs. Properties różni się w zależności od wersji.

W rzeczywistości, jeśli robisz $('<div>'), jQuery również będzie używaćdocument.createElement() .

(Spójrz tylko na linię 117 ).

Istnieje pewien narzut wywołania funkcji, ale o ile wydajność nie jest krytyczna (tworzysz setki [tysięcy] elementów), nie ma większego powodu, aby powracać do zwykłego DOM .

Po prostu tworzenie elementów dla nowej strony internetowej jest prawdopodobnie przypadkiem, w którym najlepiej trzymać się jQuery sposobu robienia rzeczy.

Jeśli masz dużo treści HTML (więcej niż tylko jeden div), możesz rozważyć wbudowanie HTML w stronę w ukrytym pojemniku, a następnie zaktualizowanie go i udostępnienie w razie potrzeby. W ten sposób duża część znaczników może zostać wstępnie przeanalizowana przez przeglądarkę i uniknąć zakłócania się przez JavaScript po wywołaniu. Mam nadzieję że to pomoże!

To nie jest poprawna odpowiedź na pytanie, ale nadal chciałbym się tym podzielić ...

Używanie tylko document.createElement('div')i pomijanie JQuery znacznie poprawi wydajność, jeśli chcesz tworzyć wiele elementów w locie i dołączać do DOM.

Myślę, że używasz najlepszej metody, ale możesz ją zoptymalizować, aby:

 $("<div/>");

Nie potrzebujesz surowej wydajności z operacji, którą wykonujesz niezwykle rzadko z punktu widzenia procesora.

Musisz zrozumieć, że znaczenie wydajności tworzenia elementów nie ma znaczenia w kontekście używania jQuery.

Pamiętaj, że nie ma prawdziwego celu tworzenia elementu, chyba że faktycznie go użyjesz.

Możesz pokusić się o przetestowanie wydajności czegoś takiego jak $(document.createElement('div'))vs. $('<div>')i uzyskać duży wzrost wydajności dzięki użyciu, $(document.createElement('div'))ale to tylko element, którego jeszcze nie ma w DOM.

Jednak pod koniec dnia i tak będziesz chciał użyć tego elementu, więc prawdziwy test powinien obejmować np. .dołączyć do();

Zobaczmy, jeśli przetestujesz między sobą następujące elementy:

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

Zauważysz, że wyniki będą się różnić. Czasami jeden sposób jest lepszy od drugiego. A to tylko dlatego, że liczba zadań w tle na komputerze zmienia się z czasem.

Sprawdź się tutaj

Tak więc pod koniec dnia chcesz wybrać najmniejszy i najbardziej czytelny sposób tworzenia elementu. W ten sposób przynajmniej Twoje pliki skryptowe będą najmniejsze. Prawdopodobnie bardziej znaczący czynnik na punkcie wydajności niż sposób tworzenia elementu przed użyciem go w DOM.

Ktoś już dokonał testu porównawczego: jQuery document.createElement?

$(document.createElement('div')) jest wielkim zwycięzcą.

Jednym z punktów jest to, że może być łatwiej zrobić:

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

Następnie wykonaj to wszystko za pomocą wywołań jquery.

Korzystam z jquery.min v2.0.3. Lepiej jest dla mnie użyć następujących:

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

jak następuje:

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

Czas przetwarzania pierwszego kodu jest znacznie krótszy niż drugiego kodu.