DOM size

Style recalculation walks the affected elements to determine their computed styles. A change high in a large tree touches everything below it.

Layout computes the position and size of every affected element, and layout is the single most expensive phase of rendering.

Memory grows with the tree, which matters on lower-end devices where the browser may be reclaiming memory under pressure.

JavaScript that queries or traverses the DOM does more work, and code that does so inside an event handler directly lengthens Interaction to Next Paint.

Long lists rendered in full: a product catalogue, a table of thousands of rows, an infinite scroll that never removes what has scrolled past.

Wrapper elements added by component libraries and by nested layout systems, where five divs surround every meaningful element.

Hidden content rendered anyway: modals, tab panels, mobile and desktop variants of the same menu both present with one hidden by CSS.

Generated markup from rich text editors, which produce deeply nested spans for formatting.

Third-party widgets, each of which inserts its own subtree.

Accumulation over time in a single-page application, where each navigation adds a view and the previous one is never removed from the tree.

Paginate or virtualise long lists, rendering only what is visible plus a small margin. This is the largest available reduction on catalogue and table pages.

Render hidden content on demand rather than up front, particularly duplicated responsive variants of the same navigation.

Flatten wrapper hierarchies where a layout system allows it. Modern CSS layout needs far fewer containers than older techniques did.

`content-visibility: auto` lets the browser skip rendering work for off-screen sections without removing them from the DOM, which is a cheap improvement on long documents.

`document.querySelectorAll("*").length` in the console gives the element count immediately.

Lighthouse reports the total, the maximum depth and the largest number of children under one parent, which localises the problem.

The performance panel shows how long style recalculation and layout take, which is the cost the count is a proxy for.

Measure after interaction as well as on load. A page that starts small and grows to twenty thousand elements through infinite scroll is the common shape.

Compare the served HTML against the rendered DOM. A large gap means the elements are created by scripts, which puts their construction cost on the main thread as well.