intermediate

Rendering pipeline

HTML and CSS parsing, style calculation, layout, paint, compositing, invalidation, and frame budget reasoning.

Rendering pipeline interviews judge whether you can trace a style or DOM change through parse, style, layout, paint, and composite — and spot forced synchronous layout.

Subtopics: parsing HTML and CSS, style calculation, layout, paint, and compositing.

On interviews: explain why CSS can block first paint, what triggers reflow, and which animations stay on the compositor.

Common pitfalls: treating all visual updates as equal cost, read-write loops in scroll handlers, and will-change everywhere.

Checklist:

  • Know DOM/CSSOM and blocking resources.
  • Batch reads before writes.
  • Separate layout, paint, and composite costs.
  • Profile with DevTools before guessing.