Web Mechanics

This content is for Frontend. Switch to the latest version for up-to-date documentation.

The Big Picture

The Internet

The Internet is the massive global network of physical cables, routers, and computers. It is the infrastructure.

Analogy: Think of the Internet as the roads and highways.
Modem: Turns network information into a signal your computer can use.
Router: A device that forwards messages to the correct computer on a network.
ISP (Internet Service Provider): The company (like Comcast, BT, etc.) that manages the special routers linking you to other networks.

The WWW (World Wide Web)

The Web is an information system where documents and web resources are identified by URLs and linked together. It is a service built on top of the Internet.

Analogy: Think of the Web as the traffic, shops, and delivery services that use the roads.
The 3 Pillars: Tim Berners-Lee defined the web with three pillars: URL (Address), HTTP (Language), and HTML (Document format).

A Brief History

1969 - The Internet is Born: Known then as ARPANET (Advanced Research Projects Agency Network), a US military project. The first message (“LO”) was sent from UCLA to Stanford.
1983 - TCP/IP: The network adopted the TCP/IP protocol, effectively creating the modern “Internet”.
1989 - The Web Proposed: Tim Berners-Lee at CERN (Switzerland) wrote the proposal for the World Wide Web.
1991 - First Website: The Web became publicly available. The first site was http://info.cern.ch.
1993 - Mosaic Browser: The first popular browser that could display images inline, making the web accessible to non-scientists.
1994-1995 - Commercialization: Amazon (1994) and eBay (1995) were founded. JavaScript was created at Netscape in 1995, making websites dynamic.
2004 - Web 2.0: The era of social media (Facebook) and user-generated content began.
2008 - Mobile Web: Google releases Chrome; usage shifts significantly to mobile devices with the rise of smartphones.

Timeline Visualization

Web3

A quick mention of Web3: This refers to the concept of a decentralized web based on public blockchains, aiming to reduce dependency on large tech companies.

How is the Internet Connected?

Computers on the internet are not just floating in a cloud; they are connected by physical cables.

Local Network: Your computer connects to a Router via Wi-Fi or cable.
Modem: The router connects to a Modem, which converts digital signals for transmission over telephone, cable, or fiber lines.
ISP: The modem sends signals to your Internet Service Provider (ISP).
The Backbone: Your ISP connects to the Internet Backbone—the main data routes between large, strategically interconnected networks.

Visualizing the Path: `traceroute`

You can actually see these “hops” between routers using the traceroute command (or tracert on Windows) in your terminal. It shows the path your data takes to reach a destination.

traceroute google.com

Example Output:

traceroute to google.com (172.217.165.206), 64 hops max, 48 byte packets
 1  192.168.1.1 (192.168.1.1)  19.555 ms
 2  172.28.14.1 (172.28.14.1)  35.367 ms
 3  *
 4  one.one.one.one (1.0.0.1)  40.519 ms
 5  200.2.162.121 (200.2.162.121)  38.775 ms
 6  190.242.180.32 (190.242.180.32)  97.777 ms
 7  *
 8  *
 9  *
10  192.178.68.50 (192.178.68.50)  184.578 ms
11  142.251.77.73 (142.251.77.73)  113.046 ms
12  142.250.239.63 (142.250.239.63)  127.168 ms
13  lax31s06-in-f14.1e100.net (172.217.165.206)  145.737 ms

Understanding the Output

Hops (Rows 1-13): Each line represents a “hop” or a router that your data passed through. It took 13 steps to get from your computer to Google’s server.
Row 1 (192.168.1.1): This is your local router (the one in your house/office).
Rows 2-6: These are likely routers belonging to your ISP (Internet Service Provider) and regional network hubs.
Asterisks (*): Seen in rows 3, 7, 8, 9. This means the router did not reply to the test signal. This is normal; many servers block “ping” requests for security, appearing as “invisible” hops.
Row 13 (lax31s...): The final destination! The 1e100.net is a domain owned by Google. The 145.737 ms is the total time it took.

The Core Architecture

The web operates primarily on a Client-Server model.

Client-Server Architecture

The Client (User): Usually your Web Browser (Chrome, Firefox, Safari). It asks for information.
The Server (Provider): A comprehensive computer program that stores website files (HTML, CSS, Images) and sends them to the client when requested.

Web Servers (Deeper Dive)

A web server can be hardware or software:

Hardware: The physical computer storing the website’s files. It is always connected to the internet.
Software: The program that understands HTTP and URLs. It controls how users access the files.

Static Server: Sends files “as-is” (simple HTML/CSS).
Dynamic Server: Processes content (using a database) before sending it (e.g., Facebook, Amazon).

Web Browsers (Deeper Dive)

The browser is the user’s window to the web. Its main job is to fetch resources from the server and render (display) them.

Browser Engines & JS Engines

A browser is made of several components that work together to turn code into a visual, interactive experience. The two most critical are the Rendering Engine and the JavaScript Engine.

1. Rendering Engine

Also known as the Browser Engine or Layout Engine. Its primary job is to transform HTML and CSS into pixels on the screen.

Process: It parses HTML to build the DOM (Document Object Model) and CSS to build the CSSOM (CSS Object Model). It then combines them into a Render Tree to calculate the position of every element (Layout) and eventually draws them (Painting).
Common Rendering Engines:
- Blink: Forked from WebKit. Used by Chrome, Edge, Opera, Brave, and Vivaldi.
- WebKit: Developed by Apple. Used by Safari and is the mandatory engine for all browsers on iOS.
- Gecko: Developed by the Mozilla Foundation. Used by Firefox.

2. JavaScript Engine

While the rendering engine handles visuals, the JS engine handles logic. It executes your JavaScript code.

Process: Modern engines use JIT (Just-In-Time) Compilation. They don’t just interpret code line-by-line; they compile it into machine code at runtime for high performance. They also handle memory management through Garbage Collection.
Common JS Engines:
- V8: Developed by Google (Open Source). Used in Chrome, Edge, Node.js, and Deno.
- JavaScriptCore (JSC): Also called “Nitro”. Used in Safari and Bun.
- SpiderMonkey: The first-ever JS engine (created by Brendan Eich). Used in Firefox.

Browser	Rendering Engine	JS Engine
Chrome / Edge	Blink	V8
Safari	WebKit	JavaScriptCore
Firefox	Gecko	SpiderMonkey

Note: This variety is why developers must test their code on multiple browsers (Cross-Browser Compatibility). Even if the JS works, the CSS might render differently, or vice versa.

Hosting

Hosting is the service of renting space on a web server to store your website’s files so they are accessible on the internet.

Analogy: Renting a plot of land for your shop (website).

Hosting Providers

Companies that provide the servers and technology to put websites on the internet.

Shared Hosting: Multiple websites share one server (cheap, good for beginners).
VPS (Virtual Private Server): A virtualized private section of a server (more control).
Cloud Hosting: Uses a network of servers hosted in the cloud (scalable, e.g., AWS, Vercel, Netlify).
Dedicated Hosting: You rent an entire physical server (maximum control and power).

Registrars

A Domain Registrar is a company accredited by ICANN to reserve and sell domain names to the public. If you want a website address like example.com, you must pay a registrar to reserve it for you.

Analogy: The land registry office where you register the title deed for your shop’s address.
Popular Registrars: GoDaddy, Namecheap, Google Domains (now Squarespace), Cloudflare.
Role: They handle the administrative side of domain ownership and point your domain to your hosting provider via DNS settings.

CDN (Content Delivery Network)

A CDN is a geographically distributed group of servers that work together to provide fast delivery of Internet content.

Problem: If your server is in New York and a user visits from Tokyo, the data has to travel halfway around the world (high latency).
Solution: A CDN caches (copies) your website’s static files (images, CSS, JS) to servers all over the globe. The user in Tokyo gets the data from a CDN server in Tokyo, not New York.
Benefits: Faster load times, reduced bandwidth costs, and improved security (DDoS protection).
Examples: Cloudflare, Akamai, Amazon CloudFront.

How do we actually find a website?

What Happens When You Visit a Website?

When you type google.com and press Enter, a series of steps happens in milliseconds:

DNS Lookup: The browser asks a DNS server for the IP address of google.com.
Connection: The browser establishes a connection (TCP) with the server at that IP.
Request: The browser sends an HTTP Request (“Get me the home page”).
Response: The server processes the request and sends back an HTTP Response (HTML code).
Rendering: The browser reads the HTML and displays the page.

URL (Uniform Resource Locator)

The URL is the address of a unique resource on the Web.

Anatomy of a URL: https://www.example.com:80/path/to/myfile.html?key1=value1#SomewhereInTheDocument

Scheme (https): The protocol (usually HTTP or HTTPS). Tells the browser how to communicate.
Authority (www.example.com:80):

Domain: The name of the web server (www.example.com).
Port: The technical “gate” (usually 80 for HTTP, 443 for HTTPS).

Path (/path/to/myfile.html): The exact location of the file on the server.
Parameters (?key1=value1): Extra data provided to the web server (like search terms).
Anchor (#SomewhereInTheDocument): A bookmark to a specific spot inside the resource itself.

Domain Name Breakdown

A domain name is a human-readable address for a website. Structurally, it reads from right to left.

Example: docs.google.com

TLD (Top-Level Domain): The suffix at the end (e.g., .com).
Domain (Second-Level Domain): The specific name of the entity or project (e.g., google).
Subdomain: The prefix that organizes distinct sections (e.g., docs or www).

Understanding TLDs (Top-Level Domains)

Values like .com, .org, or .nl are managed by ICANN (Internet Corporation for Assigned Names and Numbers).

Who is ICANN? ICANN is a global non-profit organization responsible for coordinating the maintenance and procedures of several databases related to the namespaces and numerical spaces of the Internet, ensuring the network’s stable and secure operation. In simple terms, they hold the “master keys” to the internet’s address book.

TLDs are categorized into several specific groups:

gTLD (Generic Top-Level Domains): The largest group, generally open for public use without strict restrictions.
- Examples: .com (Commercial), .org (Organization), .net (Network), .info (Information).
sTLD (Sponsored Top-Level Domains): Supervised by private organizations and restricted to specific communities or sectors.
- Examples: .gov (US Government agencies), .edu (Higher education institutions), .mil (US Military), .aero (Air transport industry), .museum.
ccTLD (Country Code Top-Level Domains): Two-letter codes reserved for sovereign states or dependent territories.
- Examples: .nl (Netherlands), .de (Germany), .uk (United Kingdom), .ca (Canada), .jp (Japan).
- Note on .io: Technically a ccTLD assigned to the British Indian Ocean Territory, but it is treated as a generic domain by search engines and is popular in the tech industry (referencing Input/Output).
Infrastructure TLD: Consists of only one domain: .arpa. It is used exclusively for technical infrastructure purposes.
New gTLDs: Since 2013, ICANN has opened up the system to allow thousands of new, descriptive extensions to create more availability.
- Examples: .shop, .blog, .dev, .app, .xyz, .guru, .club.

Visual Structure:

Fact: You don’t “buy” a domain; you pay for the right to use it for a year (like leasing).

DNS (Domain Name System)

The “Phonebook” of the Internet. It translates domain names (human-readable) into IP addresses (machine-readable locations).

How it works:

You type google.com.
Browser asks DNS Server: “What is the IP for google.com?”
DNS Server replies: “It is 142.250.190.46”.
Browser connects to that IP.

Hyperlinks

Links are the breakthrough that made the Web useful, allowing us to jump instantly between documents.

Internal Link: Links to another page on the same website.
External Link: Links to a page on a different website.
Anchor Link: Jumps to a specific section on the same page.

Communication

HTTP (HyperText Transfer Protocol)

This is the language clients and servers use to talk to each other.

Request: “Hello Server, please give me the home page.”
Response: “Here is the file (200 OK)” or “I can’t find it (404 Not Found).”
It is stateless: The server doesn’t remember previous requests (unless we use cookies/sessions).

References

Built with passion by Ngineer Lab