Что такое более быстрая Вставка DOM или Управление?
Я лучше для перемещения узла, я отправил вниз форме сервер или вставить его?
Я использую jQuery (1.4), но хотел бы знать и для jQuery и для JS в целом. В этом случае узел является маленьким только с одним ребенком. Но что, если это был большой список?
Что
большой список 1 = узлы на 200 линков
большой список 2 = узлы на 1 000 линков
Пример:
Вставка:
<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'));
4 ответа
Клиент будет тратить гораздо больше времени на рендеринг ваших новых элементов, чем на их размещение в DOM. Я бы порекомендовал вам полностью удалить #list из DOM, добавить в него элементы, а затем вернуть его в DOM. По крайней мере, для больших наборов данных.
Даже в этом случае перерисовка может быть медленной, особенно в IE со сложным CSS.
Это одно и то же. Если вы посмотрите на источник, вы увидите, что 'insertBefore' просто сопоставляется с 'before'.
REF для 'insertBefore': http://gist.github.com/277432#LID4389
REF для 'before': http://gist.github.com/277432#LID4088
Одним из способов повышения производительности было бы предоставление контекста для вставки.
При выполнении $ ('# list'). InsertBefore ($ ('# box')); вы должны предоставить контекстный узел, если он у вас есть, а не исследовать все дерево. Что-то похожее на
var myWapper = getWrapperFromEventOrWhereEverYouMightHaveIt();
//more code doing fancy things here
$(myWrapper, '#list').insertBefore($('#box'));
Если ваш весь список обновляется, когда вы получаете данные с сервера, тогда у вас должна быть структура, которая будет выглядеть примерно так:
<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