The rendering pipeline
Layout calculates geometry
Understand how the browser determines the size and position of boxes and why one geometry change can affect many descendants or neighbors.
8 minute lesson
Layout turns computed styles and content into geometry.
The browser calculates each participating box’s size and position. Available width, writing mode, box model, fonts, intrinsic image sizes, and layout algorithms all contribute.
Geometry is connected. Changing a container width can affect line wrapping, child sizes, and every box below it. The browser may recalculate a small subtree or a much larger part of the page.
JavaScript can force layout earlier than the browser planned. If code writes a style and immediately reads offsetWidth, the browser may need current geometry before returning the value.
Use the Performance panel to find Layout events. Select one and inspect the affected nodes or initiator information available in your browser version.
Small experiment:
const card = document.querySelector('.card')
card.style.width = '400px'
console.log(card.offsetWidth)Record this code and look for synchronous layout between the write and read.
Lesson completed