Forced Synchronous Layout

A Vanilla JS demo that reproduces a Forced Synchronous Layout (FSL) triggered by a scroll reset after a large DOM mutation. When JavaScript invalidates styles and immediately reads a geometric property like scrollTop, the browser is forced to run Recalculate Style and Layout synchronously, blocking the main thread.

The repo includes both the problematic pattern and the fix using a double requestAnimationFrame, and demonstrates how to detect and analyse the issue using the Chrome DevTools Performance Panel and Selector Stats.

Code example for the post:

• 🇪🇸 joanleon.dev/posts/forced-synchronous-layout
• 🇬🇧 joanleon.dev/en/forced-synchronous-layout

Use

node server.js

Open localhost:3000 and follow the instructions in the post.