How does a browser process a web page?

The process of web page rendering by a browser can be broken down into several stages:

1. Request and resource retrieval:

   • The user enters a URL in the address bar or clicks a link.
   • The browser sends an HTTP request to the server.
   • The server processes the request and sends back a response, usually containing an HTML document.

2. Syntax analysis (Parsing):

   • The browser receives the HTML document as bytes.
   • These bytes are decoded into characters according to the specified encoding.
   • The HTML parser analyzes the document character by character and constructs the DOM tree (Document Object Model). The DOM represents the logical structure of the document.
   • When <link> (for CSS) or <script> (for JavaScript) tags are detected, the browser begins downloading these resources in parallel with HTML parsing.

3. Building CSSOM:

   • The CSS parser analyzes CSS rules from <style> tags, <link> tags, and inline styles.
   • Based on these rules, a CSSOM tree (CSS Object Model) is constructed, containing all styles for each element on the page.

4. Building the render tree:

   • The render tree combines the DOM and CSSOM. It contains only the elements that will be displayed on the page and their associated styles.
   • Elements with display: none; CSS rule are not included in the render tree.

5. Layout (Reflow):

   • The browser calculates the exact geometric sizes and positions of each element on the page based on the render tree. This process is called Layout or Reflow.
   • Layout occurs during the initial construction of the render tree, and also when the window is resized, or elements are added/removed or styled (e.g., size, margins).

6. Painting (Repaint):

   • The browser paints each element on the screen, using information from the render tree and the results of the layout step.
   • Painting can also occur when visible properties of an element change, such as color, background, transparency, without changing its geometry (called Repaint).

7. Compositing:

   • Elements to be painted can be grouped into different layers for rendering and animation optimization.
   • These layers are then composited to display the final page on the screen.

8. Script execution:

   • When the HTML parser encounters a <script> tag, parsing of HTML is paused (by default), and the browser downloads, parses, and executes the JavaScript code.
   • JavaScript can modify the DOM and CSSOM, which may trigger re-layout and repaint steps.
   • The async and defer attributes on <script> tags influence the order and timing of script execution, allowing HTML parsing to continue.

Here is a visual flow example:

HTTP Request
↓
HTML Bytes
↓
HTML Parser
→ CSS Parser (Parallel)
    ↓           ↓
    DOM Tree  CSSOM Tree
          ↓
     Render Tree
          ↓
        Layout
          ↓
       Painting
          ↓
     Compositing
          ↓
   Screen Display

JavaScript execution can interleave at various stages, causing re-steps:

HTML Parser + Script tag
↓
Pause HTML Parsing
↓
Download Script
↓
Parse Script
↓
Execute Script
↓
(Potentially Modify DOM/CSSOM → Trigger Layout/Paint)
↓
Resume HTML Parsing

Understanding this process is important for optimizing web page performance.