Web Fundamentals: Operating Principles and Core Concepts of the Internet World

What is the Web?

The Web (World Wide Web) is an information system composed of countless web pages on the internet. It's not the same as the internet, but rather a service built on top of the internet.

Web vs Internet

Many people confuse these two concepts. Let's understand them with a simple analogy:

• Internet: Like a city's road network, it provides the basic infrastructure for connectivity
• Web: Like a delivery service operating on these roads, it's one service utilizing the road network

The internet also supports many other services:

• Email: Uses SMTP, POP3, IMAP protocols
• File Transfer (FTP): For uploading and downloading files
• Instant Messaging (IM): Like WhatsApp, Telegram
• Video Calls: Like Zoom, Skype

The Web specifically refers to web page services accessed through HTTP/HTTPS protocols.

The Birth of the Web

The Web was invented by Tim Berners-Lee in 1989 at the European Organization for Nuclear Research (CERN) in Switzerland. His original intention was:

• Problem: Scientists needed a simple way to share research documents
• Solution: Created a document system based on hyperlinks
• Core Inventions: HTML (HyperText Markup Language), HTTP (HyperText Transfer Protocol), URL (Uniform Resource Locator)

These three technologies remain the foundation of the Web today.

Browser: Gateway to the Web World

What is a Browser?

A browser is a software application whose role is to:

1. Send Requests: Request resources from web servers (web pages, images, videos, etc.)
2. Receive Responses: Get data returned from servers
3. Render Pages: Convert HTML, CSS, JavaScript into visual web pages
4. Handle Interactions: Respond to user clicks, inputs, and other operations

Mainstream Browsers

Modern Browser Ecosystem:

• Google Chrome: Largest market share globally, based on Chromium engine
• Microsoft Edge: Microsoft's modern browser, also based on Chromium
• Safari: Default browser for Apple devices, uses WebKit engine
• Firefox: Developed by Mozilla, focuses on privacy and open source, uses Gecko engine
• Opera: Feature-rich, based on Chromium

How Browsers Work?

When you type a URL in the address bar and press Enter, the browser performs these steps:

Step 1: Parse URL

User input: https://www.example.com/products/laptop

The browser breaks down the URL into:

• Protocol: https (secure HTTP)
• Domain: www.example.com
• Path: /products/laptop

Step 2: DNS Lookup

The browser needs to find the server IP address corresponding to www.example.com:

www.example.com → DNS server lookup → 192.168.1.100 (example IP)

Step 3: Establish Connection

Uses the IP address to connect to the server, establish TCP connection (if HTTPS, also establishes SSL/TLS encrypted connection)

Step 4: Send HTTP Request

Sends a request to the server specifying which page is wanted

Step 5: Receive Response

Server returns HTML document, possibly including CSS, JavaScript, images, and other resources

Step 6: Render Page

Browser parses received HTML into a DOM tree, CSS into style rules, executes JavaScript for dynamic effects, finally presenting the complete web page

URL: Address of Network Resources

URL Structure

A URL (Uniform Resource Locator) is like a real-world address, telling the browser where to find resources.

A complete URL contains multiple parts:

https://www.example.com:443/products/laptop?color=silver&size=15#reviews

Let's break it down:

1. Protocol

https://

• Defines how browser and server communicate
• http: Unencrypted plain HTTP
• https: Encrypted secure HTTP (recommended)
• Other protocols: ftp, file, ws (WebSocket), etc.

2. Domain

www.example.com

• Human-readable website address
• Composed of multiple parts:
  • com: Top-Level Domain (TLD)
  • example: Second-level domain (your registered domain)
  • www: Subdomain (optional, can also be api, blog, etc.)

3. Port

:443

• Specific channel on the server
• HTTP default port: 80 (usually omitted)
• HTTPS default port: 443 (usually omitted)
• Custom ports: like :8080, :3000

4. Path

/products/laptop

• Specifies resource location on the server
• Similar to file system path
• /products/laptop might correspond to laptop product page

5. Query Parameters (Query String)

?color=silver&size=15

• Additional information passed to server
• Starts with ?, multiple parameters connected with &
• Format: key=value
• Examples: filter conditions, search keywords, page numbers, etc.

6. Fragment Identifier

#reviews

• Specific location within page
• Not sent to server
• Browser automatically scrolls to corresponding anchor

URL Example Analysis

E-commerce product page:

https://shop.example.com/products/12345?utm_source=google#specifications

• Uses HTTPS secure protocol
• Domain: shop.example.com
• Product ID: 12345
• Source: Google ads
• Locates to product specifications section

Video website:

https://video.example.com/watch?v=abc123&t=120

• Watch video
• Video ID: abc123
• Start from second 120

IP Addresses and Domain Names

IP Address: House Number in the Network

An IP address (Internet Protocol Address) is a unique identifier for devices in a network, like house numbers in the real world.

IPv4 Address (currently mainstream):

192.168.1.1

• Composed of 4 numbers from 0-255
• Separated by dots
• Approximately 4.3 billion addresses total (running out)

IPv6 Address (future trend):

2001:0db8:85a3:0000:0000:8a2e:0370:7334

• 128-bit address, virtually unlimited quantity
• Hexadecimal separated by colons
• Solves IPv4 address shortage

Domain Name: Humanized Address

While computers use IP addresses to communicate, humans find it hard to remember strings of numbers. Domain names solve this problem:

From IP to Domain:

Hard to remember: 192.168.1.100
Easy to remember: www.example.com

DNS: Domain Name System

DNS (Domain Name System) is like the internet's "address book," responsible for converting domain names to IP addresses.

DNS Lookup Process:

1. Browser Cache: First check if locally recorded
2. Operating System Cache: Check system DNS cache
3. Router Cache: Home router may have cache
4. ISP DNS Server: Internet service provider's DNS server
5. Root DNS Server: Query server responsible for .com
6. Top-Level Domain DNS Server: Find example.com's server
7. Authoritative DNS Server: Get final IP address

The entire process typically completes in milliseconds but involves multiple levels. This layered design makes the DNS system both efficient and reliable.

hosts File

Before DNS lookup, browsers first check the hosts file, a local domain name mapping file:

Windows Location:

C:\Windows\System32\drivers\etc\hosts

macOS/Linux Location:

/etc/hosts

Uses:

• Local development, pointing domain names to local server
• Blocking ad websites
• Testing website migration

Web Server and Client

Client-Server Model

The Web uses Client-Server Architecture:

Client:

• The party initiating requests
• Usually a browser
• Can also be mobile apps, command-line tools, etc.

Server:

• The party responding to requests
• Stores website files and data
• Handles business logic

Interaction Flow:

Client: I want to access the homepage
   ↓ (Send request)
Server: Received, here's the homepage HTML
   ↓ (Return response)
Client: Received, starting to render page

Web Server Software

Software responsible for providing web services:

• Nginx: High performance, lightweight, suitable for high concurrency
• Apache: Veteran, powerful, flexible configuration
• IIS: Microsoft's web server, Windows platform
• Tomcat: Java application server
• Node.js: Server written in JavaScript

Components of a Web Page

A complete web page consists of three core technologies:

1. HTML: Structure

HTML (HyperText Markup Language) defines web page content and structure:

• Headings, paragraphs, lists
• Images, videos, links
• Forms, tables

Analogy: Like a building's framework and walls, defines the structure of the house

2. CSS: Style

CSS (Cascading Style Sheets) defines web page visual presentation:

• Colors, fonts, sizes
• Layout, spacing, alignment
• Animations, transitions

Analogy: Like house decoration, determines the house's appearance

3. JavaScript: Behavior

JavaScript defines web page interaction and dynamic behavior:

• Respond to user clicks, inputs
• Dynamically modify content
• Communicate with servers
• Complex calculations and logic

Analogy: Like a house's smart home system, makes the house respond and execute commands

How They Collaborate

HTML provides content
   ⬇
CSS beautifies content
   ⬇
JavaScript makes content dynamic
   ⬇
Users see complete, interactive web pages

Web Page Loading Process

Critical Rendering Path

When browsers load web pages, they go through these steps:

1. Build DOM (Document Object Model)

• Parse HTML document
• Create node tree structure
• Each HTML tag becomes a node

2. Build CSSOM (CSS Object Model)

• Parse CSS styles
• Create style rule tree
• Calculate final styles for each element

3. Create Render Tree

• Combine DOM and CSSOM
• Only includes visible elements
• Each element has corresponding style information

4. Layout

• Calculate position and size of each element
• Handle responsive layout
• Consider window size, font size, and other factors

5. Paint

• Convert render tree to actual pixels on screen
• Draw each layer in correct order
• Handle opacity, overlapping, and other effects

6. Execute JavaScript

• Execute script code
• May modify DOM and CSS
• Trigger re-layout and re-paint

Optimizing Loading Performance

To make web pages load faster, modern web development uses various optimization strategies:

Resource Optimization:

• Compress HTML, CSS, JavaScript files
• Optimize image size and format
• Use CDN to distribute static resources

Loading Strategy:

• Lazy Loading: Only load resources when needed
• Preloading: Load resources next page might need in advance
• Code Splitting: Split large files into smaller chunks

Caching Mechanism:

• Browser Cache: Store resources locally
• CDN Cache: Use servers closer to users
• Server Cache: Reduce repeated calculations

Summary

Web Core Concept Review:

1. Web is a service built on the internet: Web page system accessed through HTTP/HTTPS protocols

2. Browser is the tool to access the Web: Parse URLs, send requests, render pages, handle interactions

3. URL is the address of Web resources: Composed of protocol, domain, path, parameters, etc.

4. DNS converts domain names to IP addresses: Allows human-friendly domain names to locate specific servers

5. Client-Server Model: Browser initiates requests, server returns responses

6. Web pages consist of HTML, CSS, JavaScript: Structure, style, behavior as one

7. Web page loading is a complex process: Involves DOM building, style calculation, layout, painting, and other steps

Key Points:

• Web is not the same as the internet, it's a service on the internet
• Browsers convert code into visual pages through a series of steps
• Each part of a URL has specific meaning and purpose
• DNS system is key infrastructure for Web operation
• Understanding how the Web works helps better frontend development

---