JQuery - Append vs AppendTo

Может кто-нибудь объяснить мне, почему обычный Append в цикл работает лучше, чем AppendTo?JQuery - Append vs AppendTo

//Using Regular Append 
var ul = $("<ul></ul>"); 
$("#myDiv").empty().append(ul) 

$.each(movies, function (count, item) { 
    var id = 'li_' + count; 
    ul.append('<li id=' + id + '>' + item + '</li>'); 

    $('#' + id).click(function() { }); 
}); 

//Using AppendTo 
var div = $("#myDiv").empty(), 
    ul = $("<ul></ul>").appendTo(div); 

$.each(movies, function (count, item) { 
    $('<li>' + item + '</li>').click(function() { }).appendTo(ul); 
});

Результат http://jsperf.com/sdp-jquery-append/3

источник

2013-05-02 Sebastian Pederiva

Добавлены несколько более быстрых опций: http://jsperf.com/sdp-jquery-append/4 – techfoobar

Просто боковое: когда вы используете 'append', вы добавляете строку. Когда вы используете 'appendTo', вы добавляете объект jQuery. 'append' все еще немного быстрее, но разница в производительности намного меньше при использовании' append' с объектом jQuery (http://jsperf.com/sdp-jquery-append/6). Я предполагаю, что при создании объекта есть несколько дополнительных накладных расходов, когда вы создаете объект, а затем вызываете методы на этом объекте, а не выбираете кешированный объект и добавляете к нему. – billyonecan

Append против производительности appendTo (JQuery 1.9.1)

Из того, что можно увидеть в JQuery кода, одной из причин appendTo имеет более высокую производительность, потому, что Приложение appendTo немного сложнее, чем обычный append.

Хотя append зависит примерно от родной функции appendChild, appendTo является добавлением jQuery, которое необходимо обрабатывать кодом (есть дополнительный цикл внутри appendTo, который работает с элементами и фактически вызывает .append снова). Хотя удар производительности невелик (если вы просто сравниваете простейшее использование, например, в этом примере: http://jsperf.com/sdp-jquery-append/5), это, безусловно, нужно помнить.

Как, например с надписью «Лучше» в связанном JSPerf:

Он работает лучше, потому что в самой быстрой версии (в JSPerf вы связаны с) вы просто собрать HTML, который будет добавлен, а на самом деле добавления его на каждая итерация.

Это экономит ресурсы браузера, так как не нужно переплавлять и перерисовывать содержимое на каждой итерации.

источник

2013-05-02 08:54:01 WTK

Я не совсем понимаю, что вы имеете в виду, потому что оба добавления находятся в цикле «каждый», а также в первой версии браузеру нужно снова выбрать узел, вместо этого используйте «кэшированный» элемент return by appendTo –

образцы, которые вы добавлено лучше, но мой вопрос касается разницы между $ .append и $ .appendTo –

Btw есть еще более быстрое решение, не используя jQuery каждый цикл, но родной для: http://jsperf.com/sdp-jquery-append/ 7 – Simon

append(content) добавляет содержимое внутрь каждого согласованного элемента.

appendTo(selector) присоединяет все согласованные элементы к другому указанному набору элементов.

источник

2014-08-20 19:01:24 wintermintz

JQuery - Append vs AppendTo

ответ

Смежные вопросы