Client Side
User
- The user enters a URL in the browser.
Browser
- The browser constructs an HTTP request and sends it over the internet using the TCP/IP protocol. The request first hits the user's router.
Router
- The router forwards the request to the user's ISP.
ISP (Internet Service Provider)
- The ISP's DNS resolver queries a root nameserver for the proper TLD (Top-Level Domain) nameserver.
DNS Server
- The root nameserver responds with the IP address for the .com nameserver.
- The ISP's DNS resolver users the IP address it got from the root nameserver to ask the .com nameserver.
- The .com nameserver responds with the IP address for the example.com nameserver
- The ISP's DNS resolver reads the zone file from your domain's nameserver.
- The zone file shows which IP address goes with the domain.
- The ISP has the IP address for example.com, it returns this to your browser which then accesses the site's web server.
ISP (Hosting Provider)
- The hosting provider's ISP routes the packets to the router in the data center where the web server is hosted.
Router (Hosting Provider)
- The router forwards the request to the appropriate web server.
Server Side
Web Server
- The web server processes the HTTP request
Application Logic
- The server-side application processes the request, which may involve querying a database for data.
Database
- The database returns the requested data to the application logic.
Application Logic
- The application logic constructs an HTTP response containing the requested data or web page content.
Web Server
- The web server sends the HTTP response back to the user's browser via the same route
Client Side
Browser
- The browser reconstructs the HTTP response from the TCP/IP packets and renders the HTML content
- HTML parsing
- HTML parsing and DOM Construction
- Line-by-Line Parsing: The browers reads the HTML document line by line. As it parses the HTML, it constructs the Document Object Model (DOM), a tree-like representation of the structure and content of the web page.
- Element Creation: For each HTML element encountered, the browser creates a corresponding node in the DOM tree.
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Complex Example</title> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> </head> <body> <header> <h1>Welcome to My Website</h1> </header> <main> <section> <p id="intro">This is a complex example of a web page.</p> <button id="changeTextBtn">Change Text</button> </section> <div id="colorBox">Click me to change my color</div> </main> </body> </html> -
Document ├── html ├── head │ ├── meta (charset="UTF-8") │ ├── meta (name="viewport", content="width=device-width, initial-scale=1.0") │ ├── title │ │ └── "Complex Example" │ ├── link (rel="stylesheet", href="styles.css") │ └── script (src="script.js", defer) └── body ├── header │ └── h1 │ └── "Welcome to My Website" └── main ├── section │ ├── p (id="intro") │ │ └── "This is a complex example of a web page." │ └── button (id="changeTextBtn") │ └── "Change Text" └── div (id="colorBox") └── "Click me to change my color" - CSS Parsing and CSSOM Construction
- CSS Link Detection: When the browser encounters <link> tags (for external stylesheets) or <style> tags (for internal styles), it pauses HTML parsing to fetch and parse these CSS files.
- CSSOM Creation: The browser parses the CSS rules and constructs the CSS Object Model (CSSOM), another tree-like structure representing the styles to be applied to the DOM eleements.
- Blocking: CSS is a render-blocking resource. The browser waits for all CSS files to be fetched and parsed before continuing to render the content.
-
body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #f4f4f4; padding: 10px; text-align: center; } h1 { color: blue; } #colorBox { width: 100px; height: 100px; background-color: green; margin: 20px auto; text-align: center; line-height: 100px; color: white; cursor: pointer; } - CSSOM Tree
-
Stylesheet ├── Rule: body │ ├── Selector: body │ └── Declarations │ ├── font-family: Arial, sans-serif; │ ├── margin: 0; │ └── padding: 0; ├── Rule: header │ ├── Selector: header │ └── Declarations │ ├── background-color: #f4f4f4; │ ├── padding: 10px; │ └── text-align: center; ├── Rule: h1 │ ├── Selector: h1 │ └── Declaration: color: blue; └── Rule: #colorBox ├── Selector: #colorBox └── Declarations ├── width: 100px; ├── height: 100px; ├── background-color: green; ├── margin: 20px auto; ├── text-align: center; ├── line-height: 100px; ├── color: white; └── cursor: pointer;
- JavaScript Parsing and Execution
- Script Tag Detection: When the browser encounters <script> tags, it behaves differently based on the type of script:
- Blocking Scripts: If the script is not mark with defer or async, the browser pauses HTML parsing and executes the JavaScript code immediately. This can modify the DOM and CSSOM.
- Defered Scripts: Scripts with the defer attribute are downloaded during HTML parsing.
- Asynchronous Scripts: Scripts with the async attribute are downloaded during HTML parsing and executed as soon as they are available, without pausing HTML parsing.
- Execution: JavaScript can manipulate the DOM and CSSOM, dynamically changing the structure and style of the web page.
-
document.addEventListener('DOMContentLoaded', () => { const changeTextBtn = document.getElementById('changeTextBtn'); const introParagraph = document.getElementById('intro'); const colorBox = document.getElementById('colorBox'); changeTextBtn.addEventListener('click', () => { introParagraph.textContent = 'The text has been changed!'; }); colorBox.addEventListener('click', () => { colorBox.style.backgroundColor = colorBox.style.backgroundColor === 'green' ? 'red' : 'green'; }); }); - Conceptual Model
-
JavaScript Engine ├── Global Execution Context │ ├── Global Objects │ ├── Global Functions │ └── Event Loop └── Function Execution Context ├── Local Variables ├── Arguments ├── Scope Chain └── This Binding - JavaScript interacting with DOM and CSSOM
-
JavaScript Engine └── Execution Contexts ├── Global Context ├── Function Context └── Event Loop └── Event Callbacks └── Manipulate DOM/CSSOM ├── DOM Tree │ ├── Node Creation/Deletion │ └── Attribute Modification └── CSSOM Tree └── Style Modifications
- Script Tag Detection: When the browser encounters <script> tags, it behaves differently based on the type of script:
- Constructing the Render Tree
- Combining DOM and CSSOM: Once the DOM and CSSOM are constructed, the browser combines them to create the Render Tree. The Render Tree contains only the nodes required for rendering the page, excluding non-visual elements like <head> or elements with display: none.
- Layout: The browser calculateds the exact position and size of each Render Tree node. This process is called layout or reflow.
- Painting
- Rendering: The browser paints the content to the screen, converting the Render Tree nodes into actual pixels. This involves drawing text, colors, images, borders, shadows, and other visual effects.
-
Handling Subsequent Changes
- JavaScript Execution: JavaScript can continue to run after the initial load, responding to user interactions (e.g., clicks, form submissions) and making changes to the DOM and CSSOM.
- Reflow and Repaint: If JavaScript modifies the DOM or CSSOM, the browser may need to recalculate the layout (reflow) and repaint the affected parts of the screen.
- HTML parsing and DOM Construction
User
- The user sees the web page and interacts with it.
Comments...
No Comments Yet...