Нормальное добавление

Если мы собираемся добавить все эти узлы в документ, мы, скорее всего, будем делать это следующим традиционным способом: пройдемся по всем узлам и отклонируем их в индивидуальном порядке (таким образом, мы сможем продолжить их добавление по всему документу).

var div = document.getElementsByTagName("div");

for ( var i = 0; i < div.length; i++ ) {

for ( var e = 0; e < elems.length; e++ ) {

div[i].appendChild( elems[e].cloneNode(true) );

}

}

Добавление при помощи DocumentFragment

Однако если мы будем использовать DocumentFragment для совершения тех же самых операций, то ситуация изменится. Для начала мы добавим все наши узлы к самому фрагменту (используя имеющийся метод createDocumentFragment).

Самое интересное начинается тогда, когда мы собираемся добавить сами узлы в документ: нам нужно вызвать по одному разу appendChild и cloneNode для всех узлов!

var div = document.getElementsByTagName("div");

var fragment = document.createDocumentFragment();

for ( var e = 0; e < elems.length; e++ ) {

fragment.appendChild( elems[e] );

}

for ( var i = 0; i < div.length; i++ ) {

div[i].appendChild( fragment.cloneNode(true) );

}

При проведении замеров времени можно увидеть следующую картину (табл. 7.2).

Браузер

Нормальный

Fragment

Firefox 3.0.1

Safari 3.1.2

Opera 9.51

IE 6

IE 7

IE 8b1

Таблица 7.2 .Сравнение методов работы с DOM ‑деревом, результаты в миллисекундах

А если еще быстрее?

Давайте подумаем еще немного. Зачем нам каждый раз создавать фрагмент документа, если мы для этой цели можем использовать обычный его узел (фактически создавать кэш нашего узла, который мы собираемся везде менять)? Так можно прийти к следующему фрагменту кода:

var div = document.getElementsByTagName("div");

var child = document.createElement("div");

var parent = div[0].parentNode;

for ( var e = 0; e < elems.length; e++ ) {

child.appendChild( elems[e].cloneNode(true) );

}

for ( var i = 0; i < div.length; i++ ) {

// для IE

if (IE) {

parent.replaceChild(child.cloneNode(true),div[i]);

// для других браузеров

} else {

div[i] = child.cloneNode(true);

}

}

В нем соответствующие узлы документа заменяются на клонированный вариант кэшированной версии (без создания DocumentFragemnt). Это работает еще быстрее (везде, кроме IE – примерно на порядок, в IE – в полтора‑два раза).