Ответ 1
Пусть тест!
Я добавил следующий код к копии страницы "Вопросы StackOverflow" (сначала удалив существующие сценарии и запускаясь с нуля, когда один из timecom() s раскомментирован каждый раз, три пробега из 100 операций:
function timeit(f) {
var start= new Date();
for (var i=100; i-->0;) {
f();
}
return new Date()-start;
}
var c= document.getElementById('content');
var clones= [];
//alert('cloneNode: '+timeit(function() {
// clones.push(c.cloneNode(true));
//}))
//alert('innerHTML: '+timeit(function() {
// var d= document.createElement('div');
// d.innerHTML= c.innerHTML;
// clones.push(d);
//}))
Вот результаты, которые запускаются на VirtualBox на Core 2 Q9300:
IE7
cloneNode: 3238, 3235, 3187
innerHTML: 8442, 8468, 8552
Firefox3
cloneNode: 1294, 1315, 1289
innerHTML: 3593, 3636, 3580
Safari3
cloneNode: 207, 273, 237
innerHTML: 805, 818, 786
Chrome1
cloneNode: 329, 377, 426
innerHTML: 2327, 2536, 2865
Opera10
cloneNode: 801, 791, 771
innerHTML: 1852, 1732, 1672
Итак, cloneNode (true) намного быстрее, чем копирование innerHTML. Конечно, это всегда было; сериализация DOM для текста, а затем повторная обработка его из HTML - тяжелая работа. Причина, по которой дочерние операции DOM, как правило, медленны, заключается в том, что вы вставляете/перемещаете их один за другим; все операции DOM, такие как cloneNode, не должны делать этого.
Safari умеет делать innerHTML op удивительно быстро, но все же не так быстро, как это делает cloneNode. IE, как и ожидалось, является собакой.
Таким образом, авто -1 для всех, кто сказал, что innerHTML, очевидно, будет быстрее, не учитывая, что на самом деле делал вопрос.
И да, jQuery использует innerHTML для клонирования. Не потому, что быстрее, - читайте источник:
// IE copies events bound via attachEvent when
// using cloneNode. Calling detachEvent on the
// clone will also remove the events from the orignal
// In order to get around this, we use innerHTML.
jQuery использует Element.attachEvent() для реализации собственной системы событий, поэтому, естественно, это должно избежать этой ошибки. Если вам это не нужно, вы можете избежать накладных расходов.
[Отключить тему: опять же, я думаю, что сохранение jQuery в качестве вершины лучшей практики может быть немного ошибочным, особенно учитывая следующую строку:
html.replace(/ jQuery\d+="(?:\d+|null)"/g, "")
Это право - jQuery добавляет свои собственные произвольные атрибуты к элементам HTML, а затем должен избавиться от них, когда он клонирует их (или иным образом дает доступ к их разметке, например, методом $(). html())., Это довольно уродливо, но тогда он думает, что лучший способ сделать это - обработка HTML с использованием регулярного выражения, которое является основной ошибкой, которую вы ожидаете от наивных 1-репутационных SO-опросников, чем автор Second Coming Best JS Framework Evar.
Надеюсь, у вас не было строки "jQuery1 =" 2 "в любом месте вашего текстового контента", потому что если вы просто загадочно потеряли ее. Спасибо jQuery! Таким образом, исключает вне темы.]