Hack Frontend Community

How Browser Works When Entering Request and Rendering Stages

Browser Work Stages When Entering Request and Page Rendering

When user enters request in browser address bar or clicks link, several stages occur that lead to displaying page content in browser. Let's examine process in more detail:

URL Parsing and Domain Resolution

  • URL Parsing: Browser first parses entered URL, extracting protocol (e.g., http:// or https://), domain and path from it.

  • Cache lookup: Browser checks its cache to see if there's already mapping between domain and IP address. If mapping is found, it immediately connects to server.

  • OS request: If browser cache has no record, request is sent to operating system. OS checks hosts file, which may contain static domain and IP address records.

  • DNS server request: If hosts file also has no record, browser sends request to DNS server to get domain mapping. DNS server returns IP address, which browser stores in cache for certain time.

TCP Connection Establishment (Three-way Handshake)

When IP address is found, browser initiates TCP connection establishment with server. Process includes three-way handshake (TCP handshake):

  1. SYN: Client sends connection establishment request to server.
  2. SYN-ACK: Server responds with confirmation to client request.
  3. ACK: Client confirms receiving response, connection is established.

This negotiation allows establishing connection parameters such as speed and packet size.

HTTP Request Sending

When connection is established, browser sends HTTP GET request to server to get requested resource (usually HTML document).

HTML Receiving and Parsing

When server sends HTML document in response to request, browser starts parsing it and building DOM (Document Object Model) tree — structure representing HTML page as object model.

CSS and JS Loading and Parsing

  • CSS: During HTML parsing browser starts loading and parsing CSS files, creating CSSOM (CSS Object Model) — styles model containing information about how styles are applied to page elements.

  • JS: When browser encounters <script> tag, it must execute JavaScript code. Scripts can block further page rendering, as they can modify DOM or CSSOM, so JavaScript code executes synchronously before continuing rendering.

    Important: If scripts are added with async or defer attributes, they don't block rendering, as they execute after page load.

Render Tree Formation

Based on DOM and CSSOM browser builds render tree — rendering tree describing how elements will be displayed on screen. This tree includes visual elements (e.g., blocks, images, text), but doesn't include elements that aren't displayed (e.g., <head>, display: none).

Layout (Element Positioning)

At this stage browser calculates position of each element on page:

  • Browser calculates element positions (e.g., using box models) and their sizes (width, height).
  • Margins, borders, padding, as well as positioning of elements on page are calculated.

Layout stage is necessary to precisely determine where and how elements should be positioned on screen.

Painting (Rendering)

At painting stage browser "draws" each element on screen based on data from render tree. This includes displaying colors, textures, fonts, borders and other visual properties.

  • Each element is "drawn" considering its styles, and text can be drawn as separate lines or blocks.

Composition (Layer Composition)

When page elements are painted, browser moves to final stage — composition. Here layer composition occurs:

  • Browser groups elements into layers to efficiently process them. These layers can be rendered independently, speeding up rendering.
  • Important styles such as transform or opacity can be used to move elements to GPU for further processing to unload CPU.
  • At this stage browser can optimize rendering by sending layers to graphics card for rendering.

Recommendation:

To improve rendering performance, minimize blocking requests, use async script loading and optimize CSS.