Быстрый DOM

Работа с DOM‑деревом в JavaScript является самым проблематичным местом. Его можно сравнить только разве что с базой данных для серверных приложений. Если JavaScript выполняется очень долго, скорее всего, дело именно в DOM‑методах. Ниже рассмотрено несколько прикладных моментов, то есть способов максимально ускорить этот «затор».

DOM DocumentFragment: быстрее быстрого

DocumentFragment является облегченным контейнером для DOM‑узлов. Он описан в спецификации DOM1 и поддерживается во всех современных браузерах (был добавлен в Internet Explorer в 6‑й версии).

В спецификации говорится, что различные операции – например, добавление узлов как дочерних для другого Node – могут принимать в качестве аргумента объекты DocumentFragment; в результате этого все дочерние узлы данного DocumentFragment перемещаются в список дочерних узлов текущего узла.

Это означает, что если у нас есть группа DOM‑узлов, которые мы добавляем к фрагменту документа, то после этого можно этот фрагмент просто добавить к самому документу (результат будет таким же, если добавить каждый узел к документу в индивидуальном порядке). Тут можно заподозрить возможный выигрыш в производительности. Оказалось, что DocumentFragment также поддерживает метод cloneNode. Это обеспечивает нас полной функциональностью для экстремальной оптимизации процесса добавления узла в DOM‑дерево.

Давайте рассмотрим ситуацию, когда у нас есть группа узлов, которую нужно добавить к DOM‑дереву документа (в тестовой версии это 12 узлов – 8 на верхнем уровне – против целой кучи div).

var elems = [

document.createElement("hr"),

text( document.createElement("b"), "Links:" ),

document.createTextNode(" "),

text( document.createElement("a"), "Link A" ),

document.createTextNode(" | "),

text( document.createElement("a"), "Link B" ),

document.createTextNode(" | "),

text( document.createElement("a"), "Link C" )

];

function text(node, txt){

node.appendChild( document.createTextNode(txt) );

return node;

}