Который лучше: строковое поколение HTML или jQuery создание элемента DOM?
Хорошо, я переписываю некоторые ванильные функции JS в своем текущем проекте, и я в точке, где существует много HTML, сгенерированного для подсказок и т.д.
Мой вопрос, это лучший/предпочтительный, чтобы сделать это:
var html = '<div><span>Some More Stuff</span></div>';
if (someCondition) {
html += '<div>Some Conditional Content</div>';
}
$('#parent').append(html);
ИЛИ
var html = $('<div/>').append($('<span/>').append('Some More Stuff'));
if (someCondition) {
html.append($('<div/>').append('Some conditionalContent');
}
$('#parent').append(html);
?
3 ответа
С точки зрения производительности: это зависит .
В вашем коротком примере текст добавить быстрее, поскольку вы фактически не создаете никаких элементов DOM до конца. Однако, если вы делали это лот , тогда добавленное время конкатенации строк по сравнению с производительностью кэшированных фрагментов документа складывается.
Когда вы выполняете $ (html) , jQuery кеширует его как фрагмент документа (при условии, что длина строки составляет 512 байт или меньше), хотя при кешировании особого выигрыша не будет. просто $ ("") ... однако, если вы делаете это тысячи раз, влияние ощутимо, поскольку конкатенация строк становится дороже по мере того, как ваша строка становится длиннее, кешированные Стоимость фрагментов документа довольно стабильна.
Обновление: Вот несколько быстрых примеров, чтобы понять, что я имею в виду, используйте firebug, чтобы получить здесь время консоли:
Вы можете запустить это для себя: http://jsfiddle.net/Ps5ja/
console.time('concat');
var html = "";
for(var i = 0; i < 500; i++) {
html += '<div><span>Some More Stuff</span></div>';
html += '<div>Some Conditional Content</div>';
}
var elem = $(html);
console.timeEnd('concat'); //25ms
console.time('DOM');
var parent = $("<div />")
for(var j = 0; j < 500; j++) {
parent.append($('<div/>').append($('<span/>', {text :'Some More Stuff'})));
parent.append($('<div/>',{ text: 'Some conditionalContent' }));
}
console.timeEnd('DOM'); //149ms
console.time('concat caching');
var html = "";
for(var i = 0; i < 5000; i++)
html += '<div><span>Some More Stuff</span></div><div>Some Conditional Content</div>';
var elem = $(html);
console.timeEnd('concat caching'); //282ms
console.time('DOM caching');
var parent = $("<div />")
for(var j = 0; j < 5000; j++)
parent.append('<div><span>Some More Stuff</span></div><div>Some Conditional Content</div>');
console.timeEnd('DOM caching'); //157ms
Примечание: var elem = $ (html); в строковом тесте означает, что мы создаем те же элементы DOM, иначе вы сравниваете конкатенацию строк с фактическим созданием DOM, что вряд ли честно сравнение, и тоже бесполезно :)
Из вышесказанного видно, что чем сложнее кешируемый фрагмент, тем большее влияние оказывает кэширование. В первом тесте, который является вашим примером без небольшой очистки условия, DOM проигрывает, потому что в этом тесте выполняется множество мелких операций (на моей машине, но ваши отношения должны быть примерно такими же): Контакт HTML: 25 мс , Манипуляции с DOM: 149 мс .
Однако, если вы можете кэшировать сложный фрагмент, вы можете не создавать эти элементы DOM повторно, а просто клонировать их. Во втором тесте DOM побеждает, потому что, хотя метод HTML создает эту коллекцию элементов DOM 5000 раз , второй кэшированный метод создает ее только один раз и клонирует ее 5000 раз. В этом тесте: HTML Concat: 282ms , DOM Manipulation: 157ms .
Я понимаю, что это не напрямую в ответ на ваш вопрос, но, судя по комментариям, кажется, что есть некоторое любопытство по поводу производительности, поэтому просто укажите что-то, что вы можете увидеть / протестировать / поиграть.
Предпочитайте манипуляции с DOM над методами innerHTML. Во-первых, манипуляции с DOM будут правильно обрабатывать символы, которые необходимо экранировать с помощью innerHTML. Во-вторых, это обычно быстрее, иногда намного быстрее.
В общем, если мне нужно сгенерировать много HTML, я собираю их в одну строку и позволяю браузеру сгенерировать элементы сразу.
Если будет задействовано много условных выражений или циклов, вы можете использовать Array.join () вместо конкатенации строк с помощью +. При объединении строк браузер будет генерировать множество промежуточных строк, что может быть очень медленным; Array.join () пропускает все эти промежуточные строки. Для этих случаев я бы сделал что-то вроде:
var html = ['<div><span>Some More Stuff</span></div>'];
for (var i = 0; i < 1000; i++) {
html.push('<div>Some Loop Content</div>');
}
$('#parent').append(html.join(''));