Walk through the browser rendering pipeline. Which CSS triggers reflow vs repaint?
Performance-focused frontend interviews probe here — answers that know "transform uses GPU" pass, those that just say "minimize DOM" fail.
Pipeline: JS → Style (compute matched CSS) → Layout/reflow (geometry) → Paint (fill pixels) → Composite (layer to screen).
Properties that trigger reflow: width, height, top, left, display, font-size — anything geometric. Expensive, cascades to children.
Properties that skip layout but trigger paint: color, background-color, visibility. Cheaper.
Properties that skip layout AND paint (composite-only): transform, opacity. Handled on the compositor thread — ideal for animations.
will-change or translateZ(0) promotes an element to its own layer — costs memory but enables GPU-accelerated transitions.
Pipeline from top: JS mutations → style recalc → layout → paint → composite. Geometric property changes (width, top, font-size) trigger layout, which is the expensive stage because it cascades. Color/visibility changes trigger paint but skip layout. Transform and opacity skip both — they run on the compositor thread and are what you want for 60fps animations. In code: animate with `transform: translateX()` not `left: Xpx`, batch DOM reads before writes to avoid layout thrashing (every write invalidates layout, subsequent reads force sync layout). For heavy animations I promote the animated element with will-change: transform so it gets its own composite layer. The rule I teach juniors: if you're animating position, you probably want transform.
Measure with Performance panel → "Rendering" → "Layout Shift Regions" to see real impact.
getBoundingClientRect() inside an animation loop forces sync layout — classic thrashing cause.
HireMe AI (即答侠) pairs the pipeline with specific "do/don't" code snippets so your answer lands as practical, not academic.
Flex and grid layout are more expensive than block flow but negligible unless you have thousands of items. Layout cost is proportional to subtree complexity, not layout model.
Every composited layer costs VRAM. Promoting hundreds of elements can crash on low-memory devices. Promote only what animates.
HireMe AI listens to your interview in real-time, detects questions, and generates instant answer suggestions — so you never freeze up again.
Try HireMe AI Free