Computer Networks: From URL to Page RenderingComputer Networks: From URL to Page Rendering

What will you learn from this article?What will you learn from this article?

After completing this chapter, you will master the complete technical process from entering a URL to page display, and understand how browsers and servers work together. This knowledge is the foundation for learning about APIs, interfaces, network security, and other technologies. It's also key to troubleshooting everyday issues like "webpage won't load" or "slow loading."After completing this chapter, you will master the complete technical process from entering a URL to page display, and understand how browsers and servers work together. This knowledge is the foundation for learning about APIs, interfaces, network security, and other technologies. It's also key to troubleshooting everyday issues like "webpage won't load" or "slow loading."

------

0. Introduction: Lifecycle of a Network Request0. Introduction: Lifecycle of a Network Request

Analogy: An Online Shopping JourneyAnalogy: An Online Shopping Journey

Imagine you're doing some online shopping. The entire process can be divided into 5 steps:Imagine you're doing some online shopping. The entire process can be divided into 5 steps:

The process of visiting a webpage is remarkably similar to online shopping!The process of visiting a webpage is remarkably similar to online shopping!

When you type google.com in your browser and press Enter, you are the "buyer." Through a series of operations, the browser eventually delivers the "product" (webpage content) from a distant server to your screen.When you type google.com in your browser and press Enter, you are the "buyer." Through a series of operations, the browser eventually delivers the "product" (webpage content) from a distant server to your screen.

------

1. URL Parsing1. URL Parsing

Analogy: Filling Out an Order FormAnalogy: Filling Out an Order Form

If you only wrote "buy shoes" on an order, the warehouse wouldn't know which pair to send. You need to specify:If you only wrote "buy shoes" on an order, the warehouse wouldn't know which pair to send. You need to specify:

• Store type (official flagship store / regular store)Store type (official flagship store / regular store)
• Store name (Nike official store)Store name (Nike official store)
• Product location (Men's shoes / Running series)Product location (Men's shoes / Running series)
• Specific model (Air Max 90)Specific model (Air Max 90)
• Special notes (I want the red one)Special notes (I want the red one)

Actual Process: URL Parsing FlowActual Process: URL Parsing Flow

A URL (Uniform Resource Locator) is the "product locator code" of the browser world. When you type https://www.example.com:8080/path/page.html?id=123#section in the address bar, the browser immediately breaks it down:A URL (Uniform Resource Locator) is the "product locator code" of the browser world. When you type https://www.example.com:8080/path/page.html?id=123#section in the address bar, the browser immediately breaks it down:

------

2. DNS Lookup2. DNS Lookup

Analogy: Looking Up the Warehouse AddressAnalogy: Looking Up the Warehouse Address

You wrote "Nike Official Store" on your order, but the logistics system doesn't know where the warehouse is. It needs to check an address book:You wrote "Nike Official Store" on your order, but the logistics system doesn't know where the warehouse is. It needs to check an address book:

1. First check recent addresses (have I bought from this store recently?) → Browser cacheFirst check recent addresses (have I bought from this store recently?) → Browser cache
2. If not, ask the neighborhood delivery point (they know the general area assignments) → Local DNS serverIf not, ask the neighborhood delivery point (they know the general area assignments) → Local DNS server
3. Ask the headquarters dispatch center (knows who manages .com stores) → Root name serverAsk the headquarters dispatch center (knows who manages .com stores) → Root name server
4. Ask the brand management office (ultimately finds the real shipping warehouse for the Nike store) → Authoritative name serverAsk the brand management office (ultimately finds the real shipping warehouse for the Nike store) → Authoritative name server

Actual Process: DNS Hierarchical Lookup FlowActual Process: DNS Hierarchical Lookup Flow

DNS (Domain Name System) is the internet's "distributed address book lookup system." Since there are billions of domain names worldwide, a hierarchical architecture is used to distribute the query load:DNS (Domain Name System) is the internet's "distributed address book lookup system." Since there are billions of domain names worldwide, a hierarchical architecture is used to distribute the query load:

CODE 📋 Salin📋 Copy

You (Browser) ↓ Ask: What's the IP for google.com? Local DNS server (your ISP, such as China Telecom/China Unicom) ↓ Ask: Who manages .com? Root name server (13 root server groups worldwide, managing all top-level domains) ↓ Tell: Ask the .com manager Top-level domain server (Verisign manages .com) ↓ Tell: Ask the google.com manager Authoritative name server (Google's own DNS server) ↓ Tell: google.com's IP is 142.250.80.46 Return IP address to browser

Query types explained:Query types explained:

• Recursive Query: The browser sends only one request; the local DNS is responsible for querying all levels and returning the resultRecursive Query: The browser sends only one request; the local DNS is responsible for querying all levels and returning the result
• Iterative Query: Each level only tells the next level where to look; the browser needs multiple queriesIterative Query: Each level only tells the next level where to look; the browser needs multiple queries
• Caching mechanism: Query results are cached for direct return next time, greatly speeding up accessCaching mechanism: Query results are cached for direct return next time, greatly speeding up access
📖 Konsep Penting📖 Core Concept

Imagine if the entire world had only one address book — billions of people querying it simultaneously would crash it instantly. The hierarchical design lets each level manage only its own "jurisdiction," making it both efficient and reliable. This is a core design principle of the internet: distributed systems.Imagine if the entire world had only one address book — billions of people querying it simultaneously would crash it instantly. The hierarchical design lets each level manage only its own "jurisdiction," making it both efficient and reliable. This is a core design principle of the internet: distributed systems.

------

3. TCP Connection Establishment: The Three-Way Handshake3. TCP Connection Establishment: The Three-Way Handshake

💡 Tips Praktis💡 Pro Tip

Why is a "three-way handshake" needed? After finding the server address, why can't you just send data directly? Why go through three rounds of communication first?Why is a "three-way handshake" needed? After finding the server address, why can't you just send data directly? Why go through three rounds of communication first?

Analogy: Establishing a Logistics ChannelAnalogy: Establishing a Logistics Channel

If a logistics truck drove directly to the warehouse, the result could be:If a logistics truck drove directly to the warehouse, the result could be:

• The warehouse is closed → Wasted tripThe warehouse is closed → Wasted trip
• The warehouse is overloaded and not accepting orders → Can't shipThe warehouse is overloaded and not accepting orders → Can't ship
• Can't find the loading dock → Can't connectCan't find the loading dock → Can't connect

So before actually shipping goods, you must first establish a reliable transport channel.So before actually shipping goods, you must first establish a reliable transport channel.

Actual Process: TCP Three-Way Handshake FlowActual Process: TCP Three-Way Handshake Flow

TCP (Transmission Control Protocol) is the protocol that ensures reliable data transmission. Before transmitting goods (data), a connection must be established through the "three-way handshake":TCP (Transmission Control Protocol) is the protocol that ensures reliable data transmission. Before transmitting goods (data), a connection must be established through the "three-way handshake":

CODE 📋 Salin📋 Copy

Client (Your Computer) Server (Merchant Warehouse) | | |--- SYN=1 --------------------->| 1st: Hello, I'm home and ready to receive! (SYN) | | |<-- SYN=1, ACK=1 ---------------| 2nd: Got it! I'm ready to ship too. Are you home? (SYN-ACK) | | |--- ACK=1 --------------------->| 3rd: Yes! Please ship. (ACK) | | ===== Channel established, shipping begins =====

Why three times, not two?Why three times, not two?

• First (SYN): Client proves it can sendFirst (SYN): Client proves it can send
• Second (SYN-ACK): Server proves it can receive and sendSecond (SYN-ACK): Server proves it can receive and send
• Third (ACK): Client proves it can receiveThird (ACK): Client proves it can receive

The three-way handshake ensures: both parties can send and both can receive — all four conditions are met for reliable transmission.The three-way handshake ensures: both parties can send and both can receive — all four conditions are met for reliable transmission.

TCP is also responsible for:TCP is also responsible for:

• Data segmentation: Breaking large data into smaller packets for transmissionData segmentation: Breaking large data into smaller packets for transmission
• Sequential reassembly: Ensuring packets are assembled in the correct orderSequential reassembly: Ensuring packets are assembled in the correct order
• Error retransmission: Automatically resending lost packetsError retransmission: Automatically resending lost packets
• Flow control: Adjusting sending speed based on network conditionsFlow control: Adjusting sending speed based on network conditions

> HTTPS Extra Step: For HTTPS (secure websites), after the TCP handshake, a TLS handshake (1-RTT or 2-RTT) is also performed. Both parties exchange encryption keys to ensure only they can understand the subsequent conversation — like communicating in secret code.> HTTPS Extra Step: For HTTPS (secure websites), after the TCP handshake, a TLS handshake (1-RTT or 2-RTT) is also performed. Both parties exchange encryption keys to ensure only they can understand the subsequent conversation — like communicating in secret code.

------

4. HTTP Protocol: Requests and Responses4. HTTP Protocol: Requests and Responses

💡 Tips Praktis💡 Pro Tip

What are the browser and server saying to each other? After establishing a connection, how does the browser "tell" the server what it wants? And how does the server "respond"?What are the browser and server saying to each other? After establishing a connection, how does the browser "tell" the server what it wants? And how does the server "respond"?

Analogy: Ordering, Shipping, and Order VerificationAnalogy: Ordering, Shipping, and Order Verification

The logistics truck arrives at the warehouse: "Here's the order (HTTP request), I want to pick up the product (webpage HTML source code)!"The logistics truck arrives at the warehouse: "Here's the order (HTTP request), I want to pick up the product (webpage HTML source code)!"

The warehouse manager verifies: "The order is valid. Here's your package (HTML file). Please take it."The warehouse manager verifies: "The order is valid. Here's your package (HTML file). Please take it."

Actual Process: HTTP Communication FlowActual Process: HTTP Communication Flow

HTTP (HyperText Transfer Protocol) is the "conversation rules" between browser and server. After the channel is established, the browser sends a pickup request. The core goal is to retrieve the webpage's source code (HTML file):HTTP (HyperText Transfer Protocol) is the "conversation rules" between browser and server. After the channel is established, the browser sends a pickup request. The core goal is to retrieve the webpage's source code (HTML file):

HTTP Request Example:HTTP Request Example:

http 📋 Salin📋 Copy

GET /index.html HTTP/1.1 ← Request method + path + protocol version Host: www.example.com ← Target host (supports virtual hosting; one server can host multiple websites) User-Agent: Chrome/120.0 ← Client identifier (server can return adapted content based on this) Accept: text/html,application/xhtml+xml ← Acceptable response formats Accept-Language: zh-CN,zh;q=0.9 ← Preferred languages Accept-Encoding: gzip, deflate ← Supported compression formats Connection: keep-alive ← Keep connection alive (reuse TCP connection) Cookie: session_id=abc123 ← Authentication credentials

💡 Tips Praktis💡 Pro Tip

Exactly the same! The API calls you write (fetch / axios) and the browser accessing a webpage are exactly the same thing at the HTTP level. Both send a request, and the server returns text data. - If the server returns HTML, the browser renders it (turning it into a webpage). - If the server returns JSON, your code stores it (for logic processing). There aren't "two types" of requests — there's only one kind of HTTP request. The difference is just the response data format (Content-Type). This is why understanding HTTP means you understand 90% of backend API principles. If you want to dive deeper into API development, please refer to the [API chapter](./api-intro.md).Exactly the same! The API calls you write (fetch / axios) and the browser accessing a webpage are exactly the same thing at the HTTP level. Both send a request, and the server returns text data. - If the server returns HTML, the browser renders it (turning it into a webpage). - If the server returns JSON, your code stores it (for logic processing). There aren't "two types" of requests — there's only one kind of HTTP request. The difference is just the response data format (Content-Type). This is why understanding HTTP means you understand 90% of backend API principles. If you want to dive deeper into API development, please refer to the [API chapter](./api-intro.md).

Common HTTP Methods:Common HTTP Methods:

• GET: Retrieve a resource (safe, idempotent, cacheable)GET: Retrieve a resource (safe, idempotent, cacheable)
• POST: Submit data (create a resource, such as registration, login)POST: Submit data (create a resource, such as registration, login)
• PUT: Update a resource (full replacement)PUT: Update a resource (full replacement)
• PATCH: Partially update a resourcePATCH: Partially update a resource
• DELETE: Delete a resourceDELETE: Delete a resource
• HEAD: Get response headers only (no body returned; used to check if a resource exists)HEAD: Get response headers only (no body returned; used to check if a resource exists)

Server Returns HTTP Response:Server Returns HTTP Response:

http 📋 Salin📋 Copy

HTTP/1.1 200 OK ← Protocol version + status code + status description Date: Mon, 23 May 2025 12:00:00 GMT ← Server time Content-Type: text/html; charset=UTF-8 ← Content type and encoding Content-Length: 1234 ← Content length (bytes) Cache-Control: max-age=3600 ← Caching policy Set-Cookie: user_id=xyz789 ← Set Cookie <!DOCTYPE html>... ← Response body (webpage content)

HTTP Status Code Categories:HTTP Status Code Categories:

Status Code	Category	Meaning	Real-life Analogy
200	Success	Request successfully processed	"Order confirmed, shipping now"
301/302	Redirect	Resource has moved	"This store has relocated, please order at the new location"
304	Not Modified	Cache is still valid	"What you bought last time is still usable, no need to reship"
400	Client Error	Malformed request	"The order is unclear and unreadable"
401	Unauthorized	Authentication required	"Please show your membership card first"
403	Forbidden	Insufficient permissions	"Staff only, no entry"
404	Not Found	Resource does not exist	"This product is not in stock"
500	Server Error	Internal server error	"The warehouse is on fire, can't ship for now"
502	Bad Gateway	Upstream server unresponsive	"Main warehouse is out of stock, branch can't transfer either"
503	Service Unavailable	Server overloaded or under maintenance	"Too many orders, temporarily paused"

------

5. Browser Rendering Engine5. Browser Rendering Engine

💡 Tips Praktis💡 Pro Tip

How does code become a visual display? The server sends dry HTML/CSS/JavaScript code. How does the browser turn it into a rich, colorful webpage?How does code become a visual display? The server sends dry HTML/CSS/JavaScript code. How does the browser turn it into a rich, colorful webpage?

Analogy: Unboxing and AssemblyAnalogy: Unboxing and Assembly

You finally receive the delivery package (HTTP response), but when you open it, it's not ready-made furniture — it's a pile of parts (HTML) and an assembly manual (CSS). As the "buyer" (browser), you need to assemble it yourself:You finally receive the delivery package (HTTP response), but when you open it, it's not ready-made furniture — it's a pile of parts (HTML) and an assembly manual (CSS). As the "buyer" (browser), you need to assemble it yourself:

1. Open the packaging: Take out all parts and check the list (parse HTML → DOM tree).Open the packaging: Take out all parts and check the list (parse HTML → DOM tree).
2. Read the manual: Understand the instructions — which part goes where, what color (parse CSS → CSSOM tree).Read the manual: Understand the instructions — which part goes where, what color (parse CSS → CSSOM tree).
3. Sort and organize: Pick out the parts to assemble, discard the packing foam (display: none), and prepare for assembly (build render tree).Sort and organize: Pick out the parts to assemble, discard the packing foam (display: none), and prepare for assembly (build render tree).
4. Measure positions: Use a ruler to measure the room dimensions and decide exactly where each piece of furniture goes (layout/reflow).Measure positions: Use a ruler to measure the room dimensions and decide exactly where each piece of furniture goes (layout/reflow).
5. Paint and decorate: Apply paint and decals to the furniture (paint).Paint and decorate: Apply paint and decals to the furniture (paint).
6. Final display: Clean up and turn on the lights for display (compositing).Final display: Clean up and turn on the lights for display (compositing).

Actual Process: Page Rendering FlowActual Process: Page Rendering Flow

What the browser receives is HTML/CSS/JavaScript code (dry text), but it needs to become pixel imagery (a beautiful webpage). This process is called rendering, performed by the browser's rendering engine (such as Chrome's Blink, Safari's WebKit).What the browser receives is HTML/CSS/JavaScript code (dry text), but it needs to become pixel imagery (a beautiful webpage). This process is called rendering, performed by the browser's rendering engine (such as Chrome's Blink, Safari's WebKit).

Step 1: Parse HTML → Build DOM Tree (Parts List)Step 1: Parse HTML → Build DOM Tree (Parts List)

The browser reads the HTML byte stream and parses it into a DOM (Document Object Model) tree. This is like organizing a pile of scattered parts into a hierarchically structured list:The browser reads the HTML byte stream and parses it into a DOM (Document Object Model) tree. This is like organizing a pile of scattered parts into a hierarchically structured list:

html 📋 Salin📋 Copy

<!-- Original HTML --> <div class="header">Title</div> <div class="content">Content</div>

text 📋 Salin📋 Copy

DOM tree structure: Document └─ html └─ body ├─ div.header ("Title") └─ div.content ("Content")

Step 2: Parse CSS → Build CSSOM Tree (Manual)Step 2: Parse CSS → Build CSSOM Tree (Manual)

The browser parses all CSS (inline, external files) and builds a CSSOM (CSS Object Model) tree. This is like understanding the style rules in the manual:The browser parses all CSS (inline, external files) and builds a CSSOM (CSS Object Model) tree. This is like understanding the style rules in the manual:

css 📋 Salin📋 Copy

.header { color: blue; font-size: 24px; } /* Title should be blue */ .content { display: none; } /* Content temporarily hidden */

Step 3: Merge → Render Tree (Ready to Assemble)Step 3: Merge → Render Tree (Ready to Assemble)

DOM tree + CSSOM tree = Render Tree.DOM tree + CSSOM tree = Render Tree.

Key point: Only "visible" elements are in the render tree.Key point: Only "visible" elements are in the render tree.

• .header: In the render tree (visible)..header: In the render tree (visible).
• .content: Not in the render tree (because display: none, like discarded wrapping paper that doesn't need assembly)..content: Not in the render tree (because display: none, like discarded wrapping paper that doesn't need assembly).

Step 4: Layout (Reflow) — Measure DimensionsStep 4: Layout (Reflow) — Measure Dimensions

The browser calculates the exact coordinates and sizes of each node in the render tree on screen.The browser calculates the exact coordinates and sizes of each node in the render tree on screen.

• "This title box is 100px wide, 50px tall, positioned at screen coordinates (0,0).""This title box is 100px wide, 50px tall, positioned at screen coordinates (0,0)."
• This process is called reflow. If the window size changes (e.g., rotating a phone), all element positions must be recalculated — very performance-intensive.This process is called reflow. If the window size changes (e.g., rotating a phone), all element positions must be recalculated — very performance-intensive.

Step 5: Paint — Apply ColorsStep 5: Paint — Apply Colors

After knowing the positions, the browser starts filling in pixels: painting background colors, text colors, borders, shadows, etc.After knowing the positions, the browser starts filling in pixels: painting background colors, text colors, borders, shadows, etc.

Step 6: Composite — Final DisplayStep 6: Composite — Final Display

Modern browsers divide the page into multiple layers for separate painting (e.g., 3D transforms, independent scrollbar layers), and the GPU composites them together like Photoshop layers onto the screen.Modern browsers divide the page into multiple layers for separate painting (e.g., 3D transforms, independent scrollbar layers), and the GPU composites them together like Photoshop layers onto the screen.

📖 Konsep Penting📖 Core Concept

Layout and painting are when the browser is busiest. The more elements and complex the structure on a page, the more time the browser needs to calculate positions and paint colors. This is why some complex pages can feel sluggish.Layout and painting are when the browser is busiest. The more elements and complex the structure on a page, the more time the browser needs to calculate positions and paint colors. This is why some complex pages can feel sluggish.

------

5.5 Page Generation Methods: Static vs. Dynamic Websites5.5 Page Generation Methods: Static vs. Dynamic Websites

💡 Tips Praktis💡 Pro Tip

Where does webpage content come from? We covered how browsers render pages, but how does the HTML file on the server get there? Is it prepared in advance or made on demand?Where does webpage content come from? We covered how browsers render pages, but how does the HTML file on the server get there? Is it prepared in advance or made on demand?

Everything we've covered so far is about how the browser "opens the package" — rendering the HTML/CSS/JS sent by the server into a page. But have you ever wondered: how did that HTML file on the server get there in the first place?Everything we've covered so far is about how the browser "opens the package" — rendering the HTML/CSS/JS sent by the server into a page. But have you ever wondered: how did that HTML file on the server get there in the first place?

The answer: there are two ways — and that's the difference between static and dynamic websites.The answer: there are two ways — and that's the difference between static and dynamic websites.

Static Websites: Pre-made and Served DirectlyStatic Websites: Pre-made and Served Directly

Imagine going to a supermarket to buy cookies. The cookies on the shelf are already produced at the factory — you just pick them up, no waiting needed.Imagine going to a supermarket to buy cookies. The cookies on the shelf are already produced at the factory — you just pick them up, no waiting needed.

A static website works the same way — the webpage is already prepared on the server. When you visit, the server sends the ready-made HTML file directly without any additional processing.A static website works the same way — the webpage is already prepared on the server. When you visit, the server sends the ready-made HTML file directly without any additional processing.

Characteristics:Characteristics:

• Fast access (server just sends files, no computation needed)Fast access (server just sends files, no computation needed)
• Simple to create (just write HTML and it's ready)Simple to create (just write HTML and it's ready)
• High capacity (can use CDN distribution; handles any traffic volume)High capacity (can use CDN distribution; handles any traffic volume)
• Hard to update content (changing content requires regenerating files)Hard to update content (changing content requires regenerating files)

Common examples: Company profile pages, product documentation, help centers, personal blogsCommon examples: Company profile pages, product documentation, help centers, personal blogs

Dynamic Websites: Made to Order, Different Each TimeDynamic Websites: Made to Order, Different Each Time

Now imagine going to a restaurant and ordering food. The chef prepares your dish fresh based on your order — if you order Kung Pao Chicken, you won't get Sweet and Sour Pork.Now imagine going to a restaurant and ordering food. The chef prepares your dish fresh based on your order — if you order Kung Pao Chicken, you won't get Sweet and Sour Pork.

A dynamic website generates pages "on the spot" when you visit — after receiving your request, the server queries databases, computes data, and generates a brand new HTML file for you.A dynamic website generates pages "on the spot" when you visit — after receiving your request, the server queries databases, computes data, and generates a brand new HTML file for you.

Characteristics:Characteristics:

• Real-time content (shopping carts show latest inventory, news updates instantly)Real-time content (shopping carts show latest inventory, news updates instantly)
• Personalized (after logging in, you see your own profile)Personalized (after logging in, you see your own profile)
• Powerful features (search, comments, recommendations, payments all possible)Powerful features (search, comments, recommendations, payments all possible)
• Slower access (server needs time to compute)Slower access (server needs time to compute)
• Higher server load (many simultaneous visitors may need to queue)Higher server load (many simultaneous visitors may need to queue)

Common examples: Taobao, Weibo, online banking, online documentsCommon examples: Taobao, Weibo, online banking, online documents

Do you need a server? Dynamic websites do need some kind of "backend" to generate content, but the forms vary:Do you need a server? Dynamic websites do need some kind of "backend" to generate content, but the forms vary:

• Traditional servers: Buy/rent your own server (Alibaba Cloud ECS, AWS EC2)Traditional servers: Buy/rent your own server (Alibaba Cloud ECS, AWS EC2)
• Serverless: No server management needed; the cloud provider runs your code (AWS Lambda, Alibaba Cloud Function Compute, Cloudflare Workers)Serverless: No server management needed; the cloud provider runs your code (AWS Lambda, Alibaba Cloud Function Compute, Cloudflare Workers)
• Third-party API calls: Use Stripe for payments, weather bureau API for weather — no need to write your own backend codeThird-party API calls: Use Stripe for payments, weather bureau API for weather — no need to write your own backend code
💡 Tips Praktis💡 Pro Tip

Many websites today are "hybrid": the main page structure is static, but certain parts (like comment sections, search boxes) are dynamically loaded. JavaScript can call APIs to fetch data after the page loads, achieving "static pages + dynamic functionality."Many websites today are "hybrid": the main page structure is static, but certain parts (like comment sections, search boxes) are dynamically loaded. JavaScript can call APIs to fetch data after the page loads, achieving "static pages + dynamic functionality."

Static and Dynamic Websites: A Clear ComparisonStatic and Dynamic Websites: A Clear Comparison

	Static Website	Dynamic Website
How it's generated	Pre-made, stored on server	Made on demand when visited
Analogy	Products on supermarket shelves	Made-to-order dishes at a restaurant
Speed	Fast	Slower (requires computation)
Can content be changed?	Difficult (need to regenerate)	Easy (change in the backend)
Best for	Display content (profiles, docs)	Interactive applications (shopping, social)
Typical examples	Company websites, help docs	Taobao, WeChat, online banking

Common QuestionsCommon Questions

Q: Can static websites not use JavaScript?Q: Can static websites not use JavaScript?

Of course they can! Interactive features like carousels, dropdown menus, and form validation can all be implemented with JavaScript on a static website. When we say "static" and "dynamic," we're referring to whether the page content is pre-prepared, not whether it has interactive features.Of course they can! Interactive features like carousels, dropdown menus, and form validation can all be implemented with JavaScript on a static website. When we say "static" and "dynamic," we're referring to whether the page content is pre-prepared, not whether it has interactive features.

Q: Do dynamic websites require buying your own server?Q: Do dynamic websites require buying your own server?

Not necessarily. Besides traditional servers, you can use Serverless (cloud functions) or directly call third-party APIs. The current trend is "avoid touching servers when possible" — using static websites + JavaScript API calls for speed and cost savings.Not necessarily. Besides traditional servers, you can use Serverless (cloud functions) or directly call third-party APIs. The current trend is "avoid touching servers when possible" — using static websites + JavaScript API calls for speed and cost savings.

💡 Tips Praktis💡 Pro Tip

Whether a website is static or dynamic, the browser rendering principles are exactly the same! The browser renders whatever the server sends. The only difference is: - Static website: The server sends a "finished product" - Dynamic website: The server sends a "freshly made" product As a frontend developer, your main focus is how the browser handles the content it receives, not how the server generated it.Whether a website is static or dynamic, the browser rendering principles are exactly the same! The browser renders whatever the server sends. The only difference is: - Static website: The server sends a "finished product" - Dynamic website: The server sends a "freshly made" product As a frontend developer, your main focus is how the browser handles the content it receives, not how the server generated it.

------

6. Summary: The Complete Network Request Process6. Summary: The Complete Network Request Process

💡 Tips Praktis💡 Pro Tip

- Explain the complete process from entering a URL to displaying a page - Understand the roles and relationships of URL, DNS, TCP, and HTTP - Know how browsers render pages - Distinguish between static and dynamic websites - Explain browser workings to others using real-life analogies- Explain the complete process from entering a URL to displaying a page - Understand the roles and relationships of URL, DNS, TCP, and HTTP - Know how browsers render pages - Distinguish between static and dynamic websites - Explain browser workings to others using real-life analogies

Let's review the entire journey:Let's review the entire journey:

Stage	Technical Term	Shopping Analogy	Core Task	Key Technology
1. Parse	URL Parsing	Fill out order	Understand what the buyer wants	Protocol, domain, port, path, parameters
2. Lookup	DNS Lookup	Find warehouse address	Find the store's shipping warehouse	Recursive/iterative queries, caching
3. Connect	TCP Handshake	Establish channel	Ensure smooth logistics	Three-way handshake, sequence numbers, flow control
4. Exchange	HTTP Exchange	Warehouse ships	Submit order and receive goods	Request methods, status codes, header fields
5. Display	Browser Rendering	Unbox and assemble	Display the product	DOM, CSSOM, render tree, layout, paint

The entire process typically completes in a few hundred milliseconds — think about how remarkable that is!The entire process typically completes in a few hundred milliseconds — think about how remarkable that is!

Your browser, in less than 1 second:Your browser, in less than 1 second:

• Parsed a complex addressParsed a complex address
• Queried DNS servers distributed around the worldQueried DNS servers distributed around the world
• Established a reliable connection with a server thousands of miles awayEstablished a reliable connection with a server thousands of miles away
• Conducted a complete HTTP conversationConducted a complete HTTP conversation
• Turned dry code into a beautiful visual displayTurned dry code into a beautiful visual display

This is the charm of the internet: complex technology, simple experience.This is the charm of the internet: complex technology, simple experience.

📖 Konsep Penting📖 Core Concept

If you want to dive deeper into any part, check out: - API Development: [Introduction to APIs](./api-intro.md) - Learn how to design and use APIs - Frontend Performance: [Frontend Performance Optimization](./frontend-performance.md) - Learn how to optimize webpage loading speed - Browser Rendering: [Browser Rendering Pipeline](./browser-rendering-pipeline.md) - Deep dive into rendering detailsIf you want to dive deeper into any part, check out: - API Development: [Introduction to APIs](./api-intro.md) - Learn how to design and use APIs - Frontend Performance: [Frontend Performance Optimization](./frontend-performance.md) - Learn how to optimize webpage loading speed - Browser Rendering: [Browser Rendering Pipeline](./browser-rendering-pipeline.md) - Deep dive into rendering details

------

7. Glossary7. Glossary

Term	Full Name	Simple Explanation
URL	Uniform Resource Locator	The "address" of a webpage, telling the browser where to find the resource.
DNS	Domain Name System	The internet's "phone book," converting human-readable domain names into machine-readable IP addresses.
IP Address	Internet Protocol Address	The unique "door number" for every networked device, such as 192.168.1.1.
TCP	Transmission Control Protocol	The "rules" ensuring reliable data transmission, establishing connections through a three-way handshake.
HTTP	HyperText Transfer Protocol	The rules for "conversation" between browser and server.
HTTPS	HTTP Secure	Secure HTTP. Adds encryption (TLS/SSL) on top of HTTP to protect data security.
HTML	HyperText Markup Language	The "skeleton" of a webpage, defining content structure.
CSS	Cascading Style Sheets	The "skin" of a webpage, defining content appearance.
DOM	Document Object Model	The tree structure the browser converts HTML into for easier manipulation.
CSSOM	CSS Object Model	The tree structure the browser converts CSS into.
Rendering		The process of the browser converting code into screen pixels.
RTT	Round Trip Time	The time for a data packet to be sent and its acknowledgment received, affecting webpage loading speed.

------

💡 Tips Praktis💡 Pro Tip

Now when you type a URL in the address bar and press Enter again, you can already see the busy and fascinating digital world behind your screen. You now understand: - Why sometimes webpages won't open (DNS resolution failure, server down) - Why some pages are fast and others slow (network latency, server performance, page complexity) - How the browser turns code into a visual display (rendering pipeline) This is the value of understanding technical principles — when problems arise, you know where to look for the cause instead of feeling helpless.Now when you type a URL in the address bar and press Enter again, you can already see the busy and fascinating digital world behind your screen. You now understand: - Why sometimes webpages won't open (DNS resolution failure, server down) - Why some pages are fast and others slow (network latency, server performance, page complexity) - How the browser turns code into a visual display (rendering pipeline) This is the value of understanding technical principles — when problems arise, you know where to look for the cause instead of feeling helpless.

← SebelumnyaPrevious1-computer-fundamentals/compilers1-computer-fundamentals/compilers SelanjutnyaNext →1-computer-fundamentals/computer-organization1-computer-fundamentals/computer-organization