Глубоко клонируясь по сравнению с установкой innerHTML: что быстрее?

Давайте протестируем!

Я добавил следующий код к копии страницы Questions StackOverflow (удаляющий существующие сценарии сначала и работающий с нуля с одним из timeit () 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 (верный) намного быстрее, чем копирование innerHTML. Конечно, это всегда было; сериализация DOM для отправки текстовых сообщений и затем перепарсинг его от HTML являются тяжелой работой. Причина дочерние операции DOM являются обычно медленными, состоит в том, что Вы вставляете/перемещаете их один за другим; внезапно операции DOM как cloneNode не должны делать этого.

Safari удается сделать innerHTML op удивительно быстро, но все еще почти так быстро, как он делает cloneNode. IE является, как ожидалось, собакой.

Так, автоматический-1s повсюду вокруг всем, кто сказал, что innerHTML, Очевидно, Будет Быстрее, не рассматривая то, что на самом деле делал вопрос.

И да, jQuery использует innerHTML для клонирования. Не потому что это быстрее хотя   —  read источник:

// 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 репутации ТАК корреспонденты, чем автор Второго пришествия Лучшая Платформа JS Evar.

Надежда у Вас не было строки “jQuery1 = "2"” нигде в Вашем текстовом содержании, потому что раз так Вы просто загадочно потеряли его. Спасибо jQuery! Таким образом заканчивается вне темы в стороне.]