Что быстрее для вставки или манипуляции DOM?

Question

Мне лучше переместить узел, который я отправил с сервера, или вставить его?

Я использую jQuery (1.4), но хотел бы знать, как для jQuery, так и для JS в целом. В этом случае узел маленький с одним ребенком. Но что, если бы это был большой список?

Что

большой список 1 = 200 li узлов

большой список 2 = 1000 узлов li

Пример:

Вставка:

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

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

против

Манипуляции:

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

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

Answer 1

Клиент будет тратить гораздо больше времени на рендеринг ваших новых предметов, чем фактически помещает их в DOM. Я бы порекомендовал вам полностью удалить #list из DOM, добавить в него элементы, а затем поместить их обратно в DOM. По крайней мере, для больших наборов данных.

Даже тогда перерисовка может быть медленной, особенно в IE со сложным CSS.

Answer 2

Два одинаковы. Если вы посмотрите на источник, вы увидите, что «insertBefore» просто сопоставлен с «before».

REF для 'insertBefore': http://gist.github.com/277432#LID4389

REF для «до»: http://gist.github.com/277432#LID4088

Answer 3

Если ваш весь список обновляется, когда вы получаете данные с сервера, то у вас должна быть структура, которая выглядит примерно так:

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

Затем вы можете отправить все узлы в виде списка элементов li и затем сделать что-то вроде этого:

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

Тесты показали, что innerHTML быстрее, чем добавление, вставка (до и после) и т. Д. http://www.quirksmode.org/dom/innerhtml.html

Answer 4

Одним из способов повышения производительности было бы предоставление контекста для вставки.

При выполнении $('#list').insertBefore($('#box')); вы должны предоставить контекстный узел, если он у вас есть, а не исследовать все дерево. Нечто похожее на

var myWapper = getWrapperFromEventOrWhereEverYouMightHaveIt();

//more code doing fancy things here

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