"wirtualna" manipulacja domem?

Question

Wiem, że wykonywanie wielu manipulacji w domenie jest złe, ponieważ wymusza wielokrotne odświeżanie.

tj:

$('body').append('<div />') 
     .append('<div />') 
     .append('<div />') 
     .append('<div />'); 

Zamiast lepszą praktyką jest podobno:

$('body').append('<div><div></div><div></div><div></div><div></div></div>'); 

ale jestem ciekaw wirtualnym manipulacji

tj:

$('<div />').append('<div />') 
      .append('<div />') 
      .append('<div />') 
      .append('<div />') 
      .appendTo('body'); 

jest to Nadal jest źle, oczywiście będzie kilka narzutów związanych z wywoływaniem funkcji kilka razy, ale czy będą jakieś poważne hity wydajności?

---

Powód pytam to:

var divs = [ 
    {text: 'First', id: 'div_1', style: 'background-color: #f00;'}, 
    {text: 'Second', id: 'div_2', style: 'background-color: #0f0;'}, 
    {text: 'Third', id: 'div_3', style: 'background-color: #00f;'}, 
    {text: 'Fourth', id: 'div_4', style: 'background-color: #f00;'}, 
    {text: 'Fifth', id: 'div_5', style: 'background-color: #0f0;'}, 
    {text: 'Sixth', id: 'div_6', style: 'background-color: #00f;'} 
]; 

var element = $('<div />'); 

$.each(divs, function(i,o){ 
    element.append($('<div />', o)); 
}); 

$('body').append(element); 

Wyobraźmy sobie, że tablica DIV ma pochodzić z tabeli bazy danych opisujących postać (ok, używam div w przykładzie, ale może być łatwo zastąpione przez wejścia) lub coś podobnego.

lub z „zalecanych” wersji mamy:

var divs = [ 
    {text: 'First', id: 'div_1', style: 'background-color: #f00;'}, 
    {text: 'Second', id: 'div_2', style: 'background-color: #0f0;'}, 
    {text: 'Third', id: 'div_3', style: 'background-color: #00f;'}, 
    {text: 'Fourth', id: 'div_4', style: 'background-color: #f00;'}, 
    {text: 'Fifth', id: 'div_5', style: 'background-color: #0f0;'}, 
    {text: 'Sixth', id: 'div_6', style: 'background-color: #00f;'} 
]; 

var element = '<div>'; 

$.each(divs, function(i,o){ 
    element += '<div '; 

    $.each(o, function(k,v){ 
     if(k != 'text'){ 
      element += k+'="'+v+'" '; 
     }    
    }); 

    element += '>'+o.text+'</div>'; 

}); 

element += '</div>'; 

$('body').append(element); 

Answer 1

Po pierwsze, mimo że jest wielki, aby przeczytać o potencjalnej wydajności uderza jak to zawsze należy zacząć od pomiaru, aby zobaczyć, jeśli nawet mają problem.

Jeśli nie możesz wykryć problemu, napisz najbardziej czytelny kod.

Jeśli możesz dostrzec problem, zmierzyć, zmienić i zmierzyć.

Powiedziawszy to wszystko, ostatni wysłany przez ciebie przykład zawiera elementy, które nie zostały jeszcze zapisane w DOM, więc nie będzie odświeżenia, dopóki appendTo nie doda elementów do DOM.

Byłbym bardzo zaskoczony, gdyby udało się uchwycić różnicę w prędkości między drugim a trzecim przykładem - i całkiem zdziwiony, gdybyś zauważył jakąkolwiek istotną różnicę między nimi.

Answer 2

Jeśli naprawdę martwisz się o wydajność podczas dołączania węzłów, musisz użyć modułów dokumentu. Pozwalają one na dołączanie elementów do domingu bez odświeżania. John Resign ma numer excellent article na ten temat. Zauważa wzrost wydajności o 200-300%. Zaimplementowałem fragmenty dokumentów w jednej z moich aplikacji i mogę potwierdzić jego roszczenie.

Answer 3

Myślę, że jeśli zaczniesz dochodzić do punktu, w którym ten rodzaj kodu jest wąskim gardłem wydajności, powinieneś używać szablonów zamiast manipulacji DOM.

Ale tak, użycie podejścia polegającego na fragmentacji dokumentu (umieszczenie wszystkich węzłów w odłączonym węźle przed dołączeniem do DOM) będzie w większości przypadków szybsze, prawie nigdy wolniejsze.

• http://mustache.github.com/
• https://developers.google.com/closure/templates/docs/helloworld_js
• https://developer.mozilla.org/en-US/docs/JavaScript_templates

Answer 4

Cokolwiek stało się z dobrej starej generacji znaczników w czasie wykonywania? Poważnie, co się stało?

Zgadzam się z punktem @ Sohnee na temat znaczenia czytelności, ale manipulacje DOM są jednymi z najdroższych operacji, jakie może wykonać przeglądarka. Opcja utrzymywania ciągu znaczników może być doskonale czytelna i zapewniać poprawę w zakresie doświadczenia użytkownika, która jest nieistotna.

Tworzymy tabelę 10x100 w czasie wykonywania - całkiem rozsądny (i nie najbardziej złożony scenariusz) do dzielenia danych. Na czterordzeniowym komputerze z najnowszą wersją przeglądarki Chrome skrypt manipulacji DOM zajmuje 60 ms, w przeciwieństwie do 3ms dla buforowania znaczników.

To jest nieodróżnialna różnica w mojej konfiguracji, ale co z biednym chrząszczem liczbowym siedzącym za firmową zaporą ogniową i wciąż zmuszonym do używania przestarzałej wersji IE? Co się stanie, jeśli wymagane operacje DOM będą cięższe, z manipulacją atrybutami i agresywnym wymuszaniem ?

Wszystko, co powiem, to to, że jeśli chcesz zoptymalizować niektóre javascript, nie jest to złe miejsce na początek.