Rendering UI in Browser

Rendering UI in Browser

Rendering the UI is a 2 step process for the browser:

Browser and the URL

Here are the steps involved:

Browser and the URL

Step 1: URL Entry
User Input: User types a URL into the browser's address bar and presses Enter.

Step 2: URL Parsing

 - Scheme Identification: Browser identifies the scheme of the entered URL (e.g., http, https).
 - Domain Extraction: Browser extracts the domain name (e.g., example.com), to get the IP address of the server on which code is present

Parts of URL:
URL: https://www.example.com:443/path/to/resource?key1=value1&key2=value2#section1

Breaking down this URL:

Browser and the URL

Step 3: Browser Cache Check
 - Cache Lookup: Browser first checks its local DNS cache to see if it already knows the IP address to the entered URL.
 - Cache Hit/Miss: Determines if the requested resource is available in the cache.

Step 4: DNS Resolution

 - DNS Query: If cache miss, browser sends a DNS query to resolve the domain name to an IP address.
 - DNS Server: Query reaches the DNS server, which responds with the IP address

DNS Providers: GoDaddy, Namecheap, Hostinger, AWS Route53 etc

Browser and the URL

What is DNS?

1. DNS stands for Domain Name System.
2. It is essentially the phonebook of the internet.
3. It maps domain names to the IP addresses of the server
4. When you enter a web address (like www.example.com) into your browser, DNS is responsible for finding the corresponding IP address (like 93.184.216.34) so that your browser can load the website.

DNS Resolution Process:

• The request goes to your Internet Service Provider's (ISP) DNS server.
• Recursive Query: The ISP's DNS server performs a recursive query to find the IP address:
• Root DNS Servers: The request first goes to a root DNS server, which directs it to the appropriate top-level domain (TLD) server (like .com, .org, etc.).
• TLD DNS Servers: These servers then point to the authoritative DNS servers for the specific domain.
• Authoritative DNS Servers: These contain the DNS records for the domain and provide the IP address for the requested domain.
• Returning the IP Address: The IP address is sent back to the browser.

Browser and the URL

Common DNS Terms

• IP Address: A unique string of numbers separated by (.) (IPv4) or colons (:) (IPv6),
• Nameserver: A server that holds DNS records and is responsible for translating domain names into IP addresses,
• Local DNS Cache: A temporary storage on your computer or browser that holds recent DNS lookups to speed up the process of loading websites you have visited before.
• TTL (Time to Live): The duration that a DNS record is cached by DNS servers and clients (browser). After the TTL expires, the DNS record needs to be retrieved again.

DNS Records: Entries in a DNS database that provide important information about a domain, including:

• A Record: Maps a domain to an IPv4 address.
• AAAA Record: Maps a domain to an IPv6 address.
• CNAME Record: Alias for one domain to another domain (e.g., www.example.com to example.com).
• MX Record: Specifies mail servers for handling email for the domain.
• TXT Record: Provides text information to sources outside your domain, which can be used for various purposes like email validation.

IPv4: 192.168.1.1 (decimal), ~4.3 billion addresses
IPv6: 2001:db8::1 (hexa-decimal), ~340 undecillion addresses

Browser and the URL

Step 5: TCP Connection

• Browsers need the IP address of server to connect to it.
• The IP address could either be found in browser's DNS Cache, or DNS Server.
• If the IP is found in DNS server, the server returns the IP address to the Browser
• Once the Browser gets the IP address, either from Cache or DNS server, it initiates a connection to the server.

 - Socket Creation: Browser creates a socket and initiates a TCP connection to the server's IP address on port 80 (HTTP) or port 443 (HTTPS).
 - Three-Way Handshake: TCP handshake process (SYN, SYN-ACK, ACK) establishes a connection.

 - TLS Handshake (if HTTPS):
  -- ClientHello: Browser sends a ClientHello message to the server, initiating the TLS      handshake.
  -- ServerHello: Server responds with a ServerHello, sending its SSL certificate.

  -- Certificate Verification: Browser verifies the server's certificate.

  -- Session Keys: Browser and server generate session keys for encrypted communication.

Browser and the URL

Step 6: HTTP Request

Once the TCP connection is established, through TLS handshake, between the browser and the server, the actual HTTP request (API or other network requests) is send to the server to process:

 - Request Formation: Browser constructs an HTTP request (GET method) for the URL.
 - Header Addition: Adds necessary headers (e.g., User-Agent, Accept).
 - Request Sending: Sends the HTTP request to the server.
Server Processing

 - Request Handling: Server processes the incoming request.
 - Response Generation: Server generates the appropriate HTTP response (e.g., HTML page).

Browser and the URL

Step 7: Server Processing

 - Request Handling: Server processes the incoming request.
 - Response Generation: Server generates the appropriate HTTP response (e.g., HTML page).

Step 8: HTTP Response

 - Response Sending: Server sends back the HTTP response, including headers and the requested resource.
 - Status Code: Response includes an HTTP status code (e.g., 200 OK).

This is the last step of the process, at this point the browser has received the data

Browser and the URL

Step 7: Server Processing

 - Request Handling: Server processes the incoming request.
 - Response Generation: Server generates the appropriate HTTP response (e.g., HTML page).

Step 8: HTTP Response

 - Response Sending: Server sends back the HTTP response, including headers and the requested resource.
 - Status Code: Response includes an HTTP status code (e.g., 200 OK).

This is the last step of the process, at this point the browser has received the data. After this, the browser follows 2 more steps to show you the UI:
Rendering and Page Display