JavaScript DocumentFragment

Jedním z méně známých, ale neuvěřitelně užitečných klenotů v JavaScriptu je DocumentFragment. DocumentFragments umožňují vývojářům umístit podřízené prvky do libovolného nadřazeného uzlu, což umožňuje interakce podobné uzlům bez skutečného kořenového uzlu. Díky tomu mohou vývojáři vytvářet strukturu, aniž by to dělali v rámci viditelného DOM – skutečnou výhodou je zvýšení rychlosti. Dovolte mi, abych vám ukázal, jak se používají DocumentFragments!

Příklad fragmentu dokumentu

Začněme s UL, pomocí kterého budeme aplikovat LI:

<ul id="list"></ul>

Injekce a úpravy DOM jsou náročné, takže čím méně interakcí, tím lépe; zde přichází na řadu DocumentFragment.  Prvním krokem je vytvoření DocumentFragment:

// Create the fragment
var frag = document.createDocumentFragment();

Tento DocumentFragment se chová jako uzel pseudo-DOM - v tomto případě si jej představte jako virtuální prvek UL. Nyní je čas přidat prvky:

// Create numerous list items, add to fragment
for(var x = 0; x < 10; x++) {
	var li = document.createElement("li");
	li.innerHTML = "List item " + x;
	frag.appendChild(li);
}

Prvky lze přidat do DocumentFragment stejně jako normální uzel DOM. Jakmile je strom uzlů DOM připraven k zobrazení stránky, jednoduše umístěte DocumentFagement do jeho nadřazeného prvku (nebo jiné funkce umístění DOM):

// Mass-add the fragment nodes to the list
listNode.appendChild(frag);

Použití DocumentFragments je rychlejší než opakované vkládání jednoho uzlu DOM a umožňuje vývojářům provádět operace uzlů DOM (jako je přidávání událostí) na nových prvcích namísto hromadného vkládání prostřednictvím innerHTML . Při provádění mnoha operací DOM mějte nablízku DocumentFragment – ​​může to výrazně zrychlit vaši aplikaci!