DOM Traversal & Reflow

DOM Node Tree vs Element Tree

The Document Object Model represents HTML as a tree of Node objects:

• childNodes (NodeList): Contains all child nodes regardless of type (Element nodes, Text nodes including whitespace, Comment nodes).
• children (HTMLCollection): Contains only Element nodes (nodeType === 1).
• parentNode vs parentElement: parentNode returns any parent node (e.g. document for <html>). parentElement returns null if the parent is not an Element.

Batching Updates with DocumentFragment

Directly appending 100 elements to the DOM in a loop triggers multiple recalculations. A DocumentFragment is a lightweight, minimal document object that exists solely in memory:

1. Append elements to the fragment in memory.
2. Append the fragment to the live DOM in a single operation.
3. The fragment is emptied and its children are transplanted into the target node, triggering only one reflow/repaint.

Layout, Reflow, and Layout Thrashing

• Reflow (Layout): The browser calculates the exact geometry, position, and dimensions of all elements in the Render Tree.
• Repaint: The browser fills in pixels (colors, borders, shadows) without altering layout geometry.
• Layout Thrashing (Forced Synchronous Layout): Occurs when JavaScript alternates between modifying the DOM and reading computed geometric properties in a loop:

// LAYOUT THRASHING (Terrible performance: triggers reflow on every loop iteration)
for (let i = 0; i < boxes.length; i++) {
  boxes[i].style.width = boxes[i].offsetWidth + 10 + 'px'; // Read triggers forced layout, write invalidates layout
}

// OPTIMIZED PATTERN: Batch reads first, then batch writes
const currentWidths = boxes.map(b => b.offsetWidth); // Batch reads
boxes.forEach((b, i) => b.style.width = currentWidths[i] + 10 + 'px'); // Batch writes