How Browsers Renders

Critical rendering path

1. Parse HTML -> DOM

   1. Request further images, scripts, stylesheets
   2. Scripts -> Render block (Pauses HTML) | Defer/async solves
   3. Browser optimizes for download
2. Parse CSS -> CSSOM
3. DOM + CSSOM = Render tree (Recalculate styles in dev tools)
4. Render tree = DOM - Head - (Display none items) + (Pseduo elements :after :before)

   1. Each node as style close to it
5. Layout

   1. For each node - width, height, position
   2. Change in width of parent affects all the descendants in it
6. Paint - Pixel by pixel paint

   1. Caused by change in backgroundImage, box-shadow or color etc
7. Composite - Individual layers together

Parse HTML

1. DOM is constructed incrementally, as the bytes arrive on the "wire"

2. When transfers happens the DOM starts buildings

   1. Bytes > Chars > Tokens > Nodes > DOM
   2. HTML5 - spec in how tree building

3. <link> discovered, network request sent | Meantime DOM constructed

4. DOM construction completes but blank screen Until CSS is downloaded

   1. Screen is empty, blocked on CSS
   2. Otherwise, flash of unstyled content (FOUC)

5. First CSS byte arrives

   1. Not incremental - cause of the cascading nature
   2. Wait for entire file
   3. Split style sheets - better (incremental reading)

6. CSSOM complete - but page blank

7. DOM + CSSOM = Render tree

Layout process

Paint process

Image decode & resize

Composite process

Dynamic changes

• Color change - repaint
• Position - Reflow (Re-layout) + repaint - nodes around it - margin change

  • Position - Reflow (Re-layout) + repaint - nodes around it - margin change
  • Major Changes - Reflow + repaint - font change
• Major Changes - Reflow + repaint - font change

Preload scanner phase

1. Requests high priority resources (images, scripts, stylesheets, fonts)

   1. if this phase not present
   2. Pares HTML -> Request script -> execution (Sync manner)
   3. If phase present then (Async manner)
2. Pre-scans done asyc loading of all files

Key performance metrics

1. FCP - First contentful paint - First DOM elements painted
2. FMP - First meaningful paint - Time for biggest element on the screen
3. T2I - Time to interactive - Time until user inputs are responsive

Optimizing for critical rendering path

1. Use defer/async scripts
2. Reduce nested DOM elements
3. Reduce file size by compression (gzip, br) or minification
4. Lazy loading - Request files that are needed for initial load
5. Hardware accelerated animations
6. Add transform: translate3D(0,0,0) (intimidate for new layer) or will-change: tranform (request for new layer)
7. Compositing (layer on top of each other) would be handled by GPU

Reference

1. Fluent conference