DOM Manipulation Without Layout Shock

Every DOM mutation has a cost. insertAdjacentHTML reflows. classList.toggle on a flex container reflows. textContent on a span inside a paragraph usually does not. The witch picks the cheapest mutation that gets the job done.

CLS — Cumulative Layout Shift — is the metric that catches sloppy variants. If your variant inserts a block above existing content, every subsequent element jumps down, the visitor loses their place, and Google penalises the page.

The cure: reserve space ahead of time, or insert below the fold, or replace text inside an element of fixed size. Measure CLS on the variant page with Lighthouse before you ship. A win that costs you a tenth of a CLS point is not a win.

// Cheap: text swap, no reflow.
el.textContent = 'New copy';

// Expensive: HTML injection that grows the page.
parent.insertAdjacentHTML('beforeend', '<div class="banner">…</div>');
// Pre-reserve height to neutralise CLS:
parent.style.minHeight = '60px';