Engrain by ByteRush

WEB.01 5 concepts · 5 ready

Browser architecture and the rendering pipeline

Explain how bytes become pixels and what triggers each pipeline stage.

  1. WEB.01.01Browser processes and navigationCoreMid-level10 min
  2. WEB.01.02Parsing HTML and CSS: DOM and CSSOMCoreMid-level11 min
  3. WEB.01.03Style, layout, paint and compositeCoreMid-level11 min
  4. WEB.01.04Forced synchronous layout and layout thrashingCoreMid-level10 min
  5. WEB.01.05The critical rendering pathCoreMid-level11 min

Interview questions in this module

  1. Describe the browser rendering pipeline from HTML bytes to pixels.
  2. What is the difference between reflow and repaint? Which CSS properties avoid both?
  3. What is the difference between async and defer?
  4. What is layout thrashing and how do you fix it?
  5. Why is CSS render-blocking?
  6. What is the critical rendering path and how do you optimise it?
  7. What is compositing and why are transform and opacity animations cheap?
  8. What does the preload scanner do?