```
Each discovered URL triggers **new network requests**.
---
## 4\. Fetching CSS (render-blocking)
### Why CSS is special
* CSS affects layout and appearance
* Browser **must know styles before painting**
### What happens
* CSS files are requested immediately
* Browser parses CSS into **CSSOM**
* Rendering waits until required CSS is ready
➡️ This is why CSS is called **render-blocking**.
---
## 5\. Fetching JavaScript (parser-blocking by default)
### Default behavior
```plaintext
```
* HTML parsing **pauses**
* JS is downloaded
* JS is executed
* Parsing resumes
Why?
* JS can modify the DOM
* Browser must ensure correct order
---
### Optimized loading
```plaintext
```
* **defer**: downloads in parallel, runs after HTML parsing
* **async**: downloads & runs as soon as ready (order not guaranteed)
---
## 6\. How multiple files are fetched efficiently
Modern browsers use:
* **HTTP/2 multiplexing** (many requests over one connection)
* **HTTP/3** (faster setup, fewer delays)
* **Connection reuse**
* **Resource prioritization**
HTML > CSS > JS > images > fonts
---
## 7\. Caching & revalidation
Before fetching, the browser checks:
* Memory cache
* Disk cache
* Service Worker cache
If cached:
* Browser may skip download
* Or validate with `If-None-Match` / `If-Modified-Since`
Result:
```plaintext
304 Not Modified
```
---
## 8\. Security checks during fetching
For every request:
* HTTPS certificate validation
* CORS enforcement
* MIME-type checking
* Mixed content blocking
---
## Big picture flow
1. URL entered
2. DNS lookup
3. Secure connection
4. Fetch HTML
5. Parse HTML
6. Discover & fetch CSS and JS
7. Execute JS
8. Render page
All of this happens in **milliseconds**.
---
## HTML parsing and DOM creation
**HTML parsing is the process by which a web browser converts HTML code into a structured, in-memory representation called the Document Object Model (DOM)**. This process is crucial for the browser to render the web page and allows scripts like JavaScript to interact with the page's content, structure, and style.
**The HTML Parsing Process**
The browser's rendering engine follows a multi-stage process to create the DOM from the raw HTML bytes it receives over the network:
1. **Byte Stream to Characters:** The raw bytes are decoded into a stream of characters based on the specified character encoding (e.g., UTF-8).
2. **Tokenization:** The character stream is converted into a sequence of defined tokens, such as "start tag," "end tag," "attribute name," "attribute value," and "comment".
3. **Tree Construction (DOM Creation):** The sequence of tokens is processed to build the hierarchical DOM tree structure.
* The browser starts by creating the `Document` object, which serves as the entry point and owner of all other nodes.
* Each HTML tag is represented as an element node in the tree, with nested tags becoming child nodes.
* This stage handles errors gracefully, as the HTML specification defines specific error handling rules for invalid syntax to ensure the parser doesn't simply abort.
**The Document Object Model (DOM)**
The DOM is a language-agnostic interface that represents the HTML document as a tree of objects (nodes). This object-oriented representation allows dynamic manipulation via scripting languages like JavaScript:
* **Nodes and Hierarchy:** Everything in the document is a node. There are different types of nodes, including element nodes (for tags like ``), text nodes (the content within elements), and attribute nodes. * **Interface:** The DOM acts as an API, providing methods and properties for developers to access and change elements dynamically. For example, [**document.getElementById()**](https://www.w3schools.com/jsref/met_document_getelementbyid.asp) is a common method to access a specific element. * **Dynamic Updates:** Changes made to the DOM using JavaScript are immediately reflected in what the user sees on the screen, enabling interactive web experiences without full page reloads. **Key Performance Consideration: Script Blocking** The parsing process can be interrupted by `