jQuery, добавляющий HTML по сравнению с добавлением существующего элемента
У меня есть строка big_html и я хочу добавить его к некоторому отделению. Я наблюдал различие в производительности в следующем:
$('#some-div').append( big_html );
// takes about 100 ms
//create it first
var append_objs = $(big_html);
$('#some-div').append( append_objs );
//takes about 150 ms
Кто-либо знает, почему это происходит? Спасибо за Ваше время.
Править: Я пытаюсь получить материал, который я добавляю к странице. Я также попробовал
var added = $(big_html).appendTo( '#some-div' );
//150 ms
Существует ли эффективный способ сделать это?
1 ответ
Во втором случае jQuery заставляет браузер создавать фрагмент документа, а затем вставляет в него HTML-код, который браузер может проанализировать. Затем вы снова можете манипулировать DOM, когда добавляете его на свою страницу.
Таким образом, вторая версия просто выполняет больше работы, чем первая.
Я призываю вас (и всех, кто интересуется) держать неминифицированную версию jQuery для ознакомления. Просто прочитать код поучительно.
Чтобы «получить» ваш контент после , он добавляется в сортировку DOM, в зависимости от того, что это такое. Поскольку содержимое добавляется , вам, по-видимому, нужно начинать с запоминания последнего элемента цели:
var last = $('#some_div > *:last');
$('#some_div').append(big_html_string);
var newStuff = last.nextAll();
Если целевой div может начинаться пустым, вам также необходимо проверить это :
var newStuff = last.length ? last.nextAll() : $('#some_div > *');