iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A browser layout engine calculates the size and position of page content from the document structure and styles. It determines the geometry of elements—where their boxes go and how large they are—before later rendering stages draw and present them.
What is a browser layout engine?
A browser layout engine is the component that works out how web content fits on the page. It uses the browser’s representation of the document and the styles applied to it to calculate the dimensions and positions of content boxes. WebKit describes this geometry calculation as “layout” in its WebCore Rendering III – Layout Basics.
The phrase can mean either the geometry-calculating stage specifically or, more loosely, the broader rendering component. MDN uses “rendering engine,” “layout engine,” and “browser engine” as overlapping terms for software that turns web content into a visual representation. When the distinction matters, use “layout” for calculating geometry and “rendering engine” for the wider work of producing the page. See MDN’s rendering engine definition.
Where layout fits in the browser’s work
Layout is one stage in a larger process, not the whole process of putting pixels on screen. A simplified sequence is:
#1 Best Overall
- Parse HTML: the browser builds a Document Object Model (DOM), a structured representation of the page.
- Resolve styles: the browser determines which CSS rules apply and computes styles for elements.
- Calculate layout: the engine works out the size and position of the resulting boxes.
- Paint and present: later work determines how content should be drawn, then handles tasks such as rasterization and compositing to produce the visible result.
This is a teaching model, not a promise that every page update repeats every stage. The Chromium team’s RenderingNG architecture overview describes separate style, layout, pre-paint, paint, compositing, and raster work; some stages can be skipped when an update does not require them.
What causes layout to run again?
Changes that can affect geometry
If a container’s width changes, its contents may become wider, narrower, or move to different positions. The browser may need to recalculate layout to determine the updated geometry. Changes to document structure or styles can also lead to layout work when they affect sizes or positions.
Updates that may not need layout
Not every visual update changes page geometry. Chrome’s Blink explainer gives scrolling as an example that may skip layout, pre-paint, and paint. The browser can use appropriate later pipeline work without recalculating element positions and sizes. See Inside look at modern web browser (part 3).
Recommended Free Tools
Layout engine vs. rendering engine vs. browser engine
- Layout engine: narrowly, the part that calculates content boxes’ sizes and positions from document structure and computed styles.
- Rendering engine: often used as another name for the layout engine, but it can also refer to the broader component responsible for turning web content into a visible page.
- Browser engine: an overlapping general term. It should not be taken to mean the entire browser: browser architecture also includes systems such as networking, process management, and JavaScript execution. Chromium’s multi-process architecture overview distinguishes renderer processes from the broader browser process.
- JavaScript engine: a separate component that runs JavaScript and WebAssembly. Scripts can change the DOM and trigger rendering updates, but script execution itself is not layout. Chrome Developers describes V8 as Blink’s JavaScript and WebAssembly engine in its browser architecture overview.
- Graphics and rasterization: later work involved in drawing and presenting content. Mozilla’s Gecko overview separates layout from graphics, while Chromium’s RenderingNG documentation describes paint and raster as distinct pipeline stages.
Examples of browser layout and rendering engines
Blink, Gecko, and WebKit are common examples. Browser-to-engine associations depend on platform, so these examples are not a permanent compatibility table.
| Engine | Examples and qualification |
|---|---|
| Blink | Used by Chromium-based browsers. Chrome Developers lists Chrome, Android WebView, Microsoft Edge, Opera, and Brave among them. Chrome on iOS and iPadOS is an important exception: it uses WebKit there. See Chrome Developers’ browser overview and MDN’s rendering engine definition. |
| Gecko | Mozilla-developed engine used by Firefox. See MDN’s Gecko definition and Mozilla’s Gecko overview. |
| WebKit | Used by Safari; Chrome on iOS and iPadOS also uses WebKit. See MDN’s rendering engine definition and Chrome Developers’ browser overview. |
Why the distinction matters
Knowing which component does what makes browser behavior easier to describe. Layout answers “where does this content go, and how big is it?” Rendering covers the broader path from web content to a visible page. JavaScript can request changes by modifying the document, but it is not the component that calculates layout; painting and graphics work happen in distinct stages as well.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
