Frontend Knowledge Hub

English

įŽ€äŊ“中文

English

įŽ€äŊ“中文

Appearance

2025-11-29
1660
10.3m

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