Co jest szybsze DOM Insertion lub Manipulation?

Question

Czy lepiej przenieść węzeł wysłany z serwera lub wstawić go?

Używam jQuery (1.4), ale chcę wiedzieć zarówno dla jQuery, jak i JS. W tym przypadku węzeł jest mały i ma tylko jedno dziecko. Ale co, gdyby była to duża lista?

Co

Cała lista 1 = 200 li węzły

duże liście 2 = 1000 li węzły

przykład:

zagłębiania:

<div id="wrap"> 
    <div id="box></div> 
</div> 

$('#box').before($('<ul id="list"><li>...</ul>')); 

vs

manipulacji:

<div id="wrap"> 
    <div id="box></div> 
</div> 
<ul id="list"><li>...</ul> 

$('#list').insertBefore($('#box')); 

Answer 1

Klient zamierza wydać o wiele więcej czasu na renderowanie nowych elementów, niż faktycznie wstawi je do DOM. Polecam usunąć całą listę z DOM, dodać do niej elementy, a następnie umieścić ją w DOM. Przynajmniej w przypadku dużych zestawów danych.

Mimo to odświeżanie może być powolne, szczególnie w przypadku IE ze złożonym CSS.

Answer 2

dwa są takie same. Jeśli spojrzysz na źródło, zobaczysz, że "insertBefore" jest po prostu zamapowany na "przed".

REF dla 'insertBefore': http://gist.github.com/277432#LID4389

REF dla 'przed': http://gist.github.com/277432#LID4088

Answer 3

Jednym ze sposobów poprawy wydajności byłoby zapewnienie kontekstu dla wstawiania.

Wykonując $('#list').insertBefore($('#box'));, należy podać węzeł kontekstu, jeśli go posiadasz, zamiast badać całe drzewo. Coś podobnego do podobnego do

Answer 4

Jeśli cała lista jest aktualizowana podczas pobierania danych z serwera, to powinieneś mieć strukturę przypominającą coś takiego:

<div id="wrap"> 
    <ul id="list"></ul> 
    <div id="box></div> 
</div> 

to możesz mieć wszystkie węzły wysyłane tylko jako listę elementów li, a następnie zrobić coś tak:

$("list")[0].innerHTML = xhr.responseText // response text is of form 
              //<li>item</li><li>item</li>... etc 

Testy wykazały, że innerHTML jest szybszy następnie dodać, wstawić (przed i po) itd http://www.quirksmode.org/dom/innerhtml.html