Skip to content

EN_CS_Knowledge

somaz edited this page Dec 27, 2023 · 19 revisions

1. How Web Browsers Work

  1. The user accesses a website using a web browser by entering a URL (e.g., www.example.com).
  2. The browser retrieves the server's IP address by querying the Domain Name System (DNS).
  3. The browser establishes a connection with the server using a process known as the 3-Way Handshake.
  4. The browser sends an HTTP Request to the server to request data.
  5. The server sends back an HTTP Response, containing the requested data.
  6. The browser then parses the HTML content received from the server to construct a Document Object Model (DOM) Tree.
  7. When a Style tag is encountered during the parsing process, the browser temporarily pauses DOM construction to parse CSS and build a CSS Object Model (CSSOM) Tree.
  8. If a script tag is encountered during parsing, the browser hands over control to the JavaScript engine to parse the JavaScript code, create an Abstract Syntax Tree (AST), and execute the script.
  9. The browser creates a Render Tree by combining the DOM and CSSOM.
  10. The series of steps up to this point is called the Construction phase.
  11. During the next phase, the rendering engine calculates the layout of each visible element and places the nodes in the Render Tree accordingly.
  12. The UI backend visits each node in the Render Tree and paints the elements on the screen.
  13. The nodes of the Render Tree are then composited in the correct order to form the final page.
  14. This series of steps is known as the Operation phase.
  15. Finally, the web browser displays the fully rendered page to the user.

Clone this wiki locally