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; }