# Internet Basics

**This note was created through collaboration with ChatGPT.**

## HTTP

HTTP (Hypertext Transfer Protocol) and its secure variant, HTTPS, are fundamental protocols used for communication between web browsers (clients) and web servers. HTTP operates at the application layer in the OSI model, providing a set of rules and conventions for data exchange. Let's explore the key aspects of HTTP and understand why it is placed at the application layer.

### Reasons for HTTP's Placement at the Application Layer

HTTP is placed at the application layer of the OSI model due to the following reasons:

1. **Protocol Design**: HTTP is designed as an application-level protocol with its own specifications for structuring requests and responses, defining data types, and specifying actions. It follows a set of rules and conventions to enable effective communication between clients and servers.

2. **Application-Specific Functionality**: HTTP is closely tied to web-related functionalities, including retrieving and delivering web pages, transmitting images, handling form submissions, and interacting with web APIs. It provides a high-level interface to facilitate these application-specific tasks.

3. **Independence from Transport Layer**: HTTP abstracts away the underlying transport mechanism used for data transmission. It does not concern itself with the actual delivery of data packets, relying on lower layers such as the transport layer (e.g., TCP or UDP) to handle this. HTTP assumes that the transport layer ensures reliable data transfer and can be used over various transport protocols.

Here is a simple http request

GET /api/posts HTTP/1.1 //Method Path HTTP Version followed by request header
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.9999.99 Safari/537.36
Accept: application/json

do more research on devtool network to see more detail

## OSI Model

The OSI (Open Systems Interconnection) model is a conceptual framework that standardizes the functions of communication systems or networks into seven distinct layers. Each layer has specific responsibilities and interacts with the layers above and below it to enable the transmission of data between networked devices. The OSI model provides a systematic way to understand and describe how different network protocols and technologies work together.

The seven layers of the OSI model, listed from the lowest to the highest, are as follows:

1. **Physical Layer**: This layer deals with the physical transmission of data over a network. It defines the electrical, mechanical, and physical aspects of the network, such as cables, connectors, and signaling.

2. **Data Link Layer**: The data link layer provides reliable transmission of data frames between adjacent network nodes. It handles error detection, framing, and flow control.

3. **Network Layer**: This layer is responsible for addressing, routing, and forwarding data packets across multiple networks. It determines the best path for data to travel from the source to the destination based on network conditions.

4. **Transport Layer**: The transport layer ensures reliable and error-free data transfer between end systems. It establishes connections, breaks data into smaller segments, manages congestion, and provides error recovery.

5. **Session Layer**: The session layer establishes, manages, and terminates communication sessions between applications. It provides mechanisms for session checkpointing, synchronization, and recovery.

6. **Presentation Layer**: This layer is responsible for data representation and encryption. It translates, encrypts, and compresses data to be sent across the network, ensuring that the receiving end can properly interpret the information.

7. **Application Layer**: The application layer is the topmost layer and is closest to the end user. It provides services and protocols that enable user applications to interact with the network. Examples of protocols at this layer include HTTP (Hypertext Transfer Protocol), SMTP (Simple Mail Transfer Protocol), and FTP (File Transfer Protocol).

## HTTP Processing

### (HTTPS) Handshake

The term "handshake" is typically used to describe the process of establishing a secure connection between a client and a server using the HTTPS protocol. HTTPS is the secure version of HTTP, where communication is encrypted to protect the integrity and confidentiality of the exchanged data.

The HTTPS handshake process can be summarized as follows:

1. **Client Hello**: The client initiates the handshake by sending a "Client Hello" message to the server. This message includes information such as the supported encryption algorithms, random data, and other details.

2. **Server Hello**: The server responds to the client's message with a "Server Hello" message. This message contains the server's chosen encryption algorithm, a random value, and other relevant information.

3. **Certificate Exchange**: The server sends its digital certificate to the client, which includes the server's public key. The certificate is used to verify the server's identity and establish trust.

4. **Key Exchange**: During this step, the client and server negotiate and agree upon a shared encryption key to be used for secure communication. Different key exchange methods, such as Diffie-Hellman key exchange or elliptic curve cryptography, can be employed.

5. **Encryption**: With the shared encryption key established, both the client and server use it to encrypt and decrypt the data exchanged between them. This ensures that the data remains confidential and secure during transmission.

6. **Secure Communication**: Once the encryption is established, the client and server can proceed with secure communication. The client can send HTTP requests, and the server responds with encrypted HTTP responses.

It's important to note that the handshake process in HTTPS is part of the underlying TLS/SSL protocol, which provides the encryption and security mechanisms.

### Pipelining

Pipelining in HTTP allows the client to **send multiple HTTP requests** to a server **without waiting for each response before sending the next request**. It aims to improve the efficiency of HTTP communication by reducing latency and maximizing network utilization. Here are some key points to understand about pipelining:

1. **Efficiency**: Pipelining enables the client to send a series of requests without waiting for each response. This approach reduces the overall time required to complete multiple requests, as it takes advantage of available network bandwidth.

2. **Concurrency**: By pipelining requests, the server can process them concurrently, improving response time for the client. It can start working on subsequent requests while still processing earlier ones, allowing for overlapping request-response cycles.

3. **Head-of-Line Blocking**: One challenge with pipelining is head-of-line blocking. If a response for one request is delayed or blocked, all subsequent responses must wait. This can impact the overall performance, as subsequent requests are held up until the delayed response is received.

4. **Compatibility**: Not all servers and proxies fully support pipelining. Some may have limitations in correctly handling pipelined requests or may not support the feature at all. This can lead to compatibility issues, and clients may need to disable pipelining to ensure consistent behavior across different server implementations.

Considering these points, it's important to note that the use of pipelining in modern HTTP implementations has been **deprecated**. Newer versions of HTTP, such as HTTP/1.1 and HTTP/2, have introduced advanced techniques like **request multiplexing** and **parallelism** to address the limitations of pipelining and improve overall performance.

These newer techniques allow for more efficient use of network resources while avoiding the head-of-line blocking issue. They enable the client to send multiple requests and receive their corresponding responses in a more optimized and concurrent manner.

When implementing HTTP applications, developers should consider the trade-offs and compatibility implications of using pipelining. It's essential to test the behavior of pipelined requests across different server implementations and consider alternative approaches introduced in newer versions of HTTP for optimal performance.

There's more to say about HTTP processing(like multiplexing mentioned above), where I'd stop here

ref for this topic :
https://cs.fyi/guide/http-in-depth
https://www.cloudflare.com/learning/ddos/glossary/open-systems-interconnection-model-osi/

## Browser Rendering Process

A browser is a software application that allows users to access and view information on the internet. It serves as a gateway between users and the vast resources available on the web. When a browser loads a webpage, it goes through a series of steps to transform the resources, such as HTML and plain text, into the visible content displayed on the screen. These steps can be broadly summarized as follows:

### Procedures

1. **Resource Gathering**: The browser starts by retrieving the necessary resources for the webpage, such as HTML, CSS, JavaScript files, images, and other media. It sends requests to the appropriate web servers and downloads these resources. It's worth noting that JavaScript files are typically placed at the end of the HTML document to avoid blocking the rendering process. Developers can use attributes like `async` or `defer` to control the script's execution and improve performance.

2. **Parsing the Code**: Once the resources are fetched, the browser parses the HTML and other markup languages to understand the structure and content of the webpage. It breaks down the code into individual elements, tags, and attributes. The browser also performs error-checking during the parsing phase to handle malformed or incorrect code.

3. **Creating the DOM Tree**: The browser uses the parsed code to construct the Document Object Model (**DOM**) tree. The DOM represents the webpage's hierarchical structure, where each element becomes a node in the tree. The DOM allows the browser to interact with and manipulate the webpage's content programmatically. Developers can use JavaScript to traverse and modify the DOM, enabling dynamic and interactive web experiences.

4. **Forming the Render Tree**: The browser combines the DOM tree with the CSS stylesheets associated with the webpage to form the render tree. The render tree contains only the elements that will be visible on the screen, considering factors such as display properties, positioning, and visibility. The render tree is optimized for rendering and forms the basis for generating the final visual representation of the webpage.

5. **Deciding the Layout**: The browser determines the layout of the elements in the render tree. It calculates the exact position and size of each element based on its CSS properties, including dimensions, margins, padding, and positioning rules. This process is known as layout or reflow. The browser takes into account various factors to ensure a consistent and visually appealing layout on different devices and screen sizes.

6. **Rendering on the Screen**: Finally, the browser instructs the GPU (Graphics Processing Unit) to draw the content on the screen based on the layout information. The GPU handles the task of rendering pixels, applying visual effects, and displaying the webpage's visual representation to the user. The browser continuously updates and refreshes the screen in response to user interactions or changes in the webpage.

### Considerations

Here are some additional tips and considerations:

- **Critical Rendering Path**: Understanding the critical rendering path is crucial for optimizing webpage loading speed. This path includes the steps of resource loading, parsing, and rendering that directly impact the time it takes for the webpage to become visible to the user. By optimizing these steps, such as minimizing the number of requests, reducing file sizes, and leveraging caching, developers can significantly improve page load times.

- **Render Blocking**: Render-blocking resources, such as CSS and JavaScript files, can delay the rendering of the webpage. To mitigate this issue, it's important to optimize the delivery and execution of these resources. For CSS, consider using inline styles or utilizing techniques like asynchronous loading or lazy loading. JavaScript files can be loaded asynchronously or deferred to prevent them from blocking the initial rendering process.

- **Critical CSS**: Critical CSS refers to the CSS required to render the above-the-fold content of a webpage. By extracting and inlining this critical CSS, developers can ensure that the essential styles are applied quickly, resulting in a faster perceived load time. This technique helps avoid render-blocking CSS resources and improves the overall rendering performance.

- **Browser Caching**: Implementing appropriate caching headers and strategies can significantly enhance the performance of a website. By instructing the browser to cache static resources like images, CSS, and JavaScript files, subsequent page visits can be faster, as the browser can retrieve these resources from the local cache rather than making additional network requests.

- **Responsive Design**: With the increasing variety of devices and screen sizes, responsive design is essential to provide a consistent and user-friendly experience across different platforms. Employing responsive design techniques, such as fluid grids, flexible images, and media queries, allows webpages to adapt and optimize their layout for various devices, ensuring a seamless browsing experience for users.

- **Performance Monitoring**: Continuously monitoring and analyzing the performance of webpages is crucial for identifying bottlenecks and areas for improvement. Tools like Lighthouse, PageSpeed Insights, and browser developer tools can provide valuable insights into performance metrics, including page load times, resource sizes, and rendering performance. By regularly assessing performance, developers can identify optimization opportunities and fine-tune their webpages for optimal speed and responsiveness.

By understanding the browser rendering process and considering these tips and considerations, developers can implement optimized methods to improve user experience, balance speed and storage management, ensure consistency, smoothness, and accessibility. It is important to consider caching strategies, efficient resource loading techniques, and responsive design principles to create high-performance web applications.

ref of this topic :
https://web.dev/howbrowserswork/

## Unicode

## Preload, Prefetch 和 Preconnect