Komprese stromu v Javascriptu

Při práci s HTML daty se nejspíš často potkáte s tím, že struktura stránky je plná obalovacích elementů. Nějak takhle

<div>
	<div>
		<div>
			<div>
				<div>
					...
				</div>
			</div>
		</div>
	</div>
</div>

Při práci na parseru mi přišlo vhod podobnou strukturu ještě před uložením optimalizovat, aby se důležité informace nemusely dolovat z vnitřku nekonečně vnořených elementů.

Nejjednodušším krokem je, zkombinovat uzly s jediným potomkem do jednoho, což znamená, že místo ukládání každého obalovacího elementu jako samostatného uzlu, můžeme je skombinovat do jednoho, pokud neobsahují další klíčové informace. Tímto způsobem můžeme významně zredukovat počet elementů ve DOM stromu a zvýšit jeho efektivitu a jako bonus méně plýtvat pamětí. Použíla jsem metodu podobou Radix Tree.

Optimalizace DOM

function compressDOM(node) {
    // Projdeme všechny potomky uzlu
    for (let i = 0; i < node.childNodes.length; i++) {
        let child = node.childNodes[i];

        // Pokud má uzel jediného potomka a není to textový uzel,
        // nahradíme ho jeho potomkem
        while (child.childNodes.length === 1 && child.firstChild.nodeType !== Node.TEXT_NODE) {
            let grandChild = child.firstChild;
            node.replaceChild(grandChild, child);
            child = grandChild;
        }

        // Rekurzivně zavoláme funkci na potomka
        compressDOM(child);
    }
}

Tato funkce projde stromem DOM a pro každý uzel, který má pouze jednoho potomka a tento potomek není textový uzel, nahradí uzel jeho potomkem. Toto se opakuje, dokud uzel nemá více než jednoho potomka nebo jeho jediný potomek je textový uzel.