What is the DOM, and roughly how does the browser render a page?
Quick Answer
The DOM is an in-memory tree representation of the HTML that JavaScript can read and modify. Rendering roughly: parse HTML → DOM, parse CSS → CSSOM, combine into the render tree, layout (compute positions/sizes), paint (fill pixels), composite layers. Changing geometry triggers a reflow (layout again); changing colour only triggers a repaint.
The DOM is the browser's object model of the page — a tree of nodes that JavaScript can query and change. To render, the browser parses the HTML into the DOM and the CSS into the CSSOM, combines them into a render tree, does layout to work out where everything goes, paints the pixels, and composites the layers. The performance implications: CSS blocks rendering, a plain script tag blocks parsing, and if you write to the DOM and then immediately read a layout property you force a synchronous reflow. For animation you want to stick to transform and opacity because they skip layout.
- CSS is render-blocking; a
<script>withoutdefer/asyncblocks parsing. - Reads that force layout (
offsetHeight,getBoundingClientRect) right after a write cause “layout thrashing” — batch reads, then writes. - Animate
transform/opacity(composite-only) rather thantop/width(reflow). - Frameworks use a virtual DOM to batch and minimise real DOM updates.