Series 1 — Web Fundamentals

 

Internet → HTTP/HTTPS → DNS → Browser

 

Bài 3 :DNS & Domain

 

DNS & Domain – Làm thế nào Domain được chuyển thành IP?

Ở hai bài trước, chúng ta đã tìm hiểu:

• Internet là gì?
• Client và Server là gì?
• IP Address là gì?
• HTTP/HTTPS dùng để giao tiếp giữa Client và Server như thế nào?

Nhưng vẫn còn một câu hỏi:

Khi chúng ta nhập google.com vào trình duyệt, làm thế nào Browser biết Server nào cần kết nối?

Browser và các thiết bị mạng cần địa chỉ IP để giao tiếp, nhưng chúng ta lại thường truy cập website bằng những cái tên dễ nhớ như:

google.com
github.com
youtube.com

Để giải quyết vấn đề này, Internet sử dụng một hệ thống có tên là DNS – Domain Name System.

1. Domain là gì?

Domain Name hay tên miền là một địa chỉ dạng chữ giúp con người dễ dàng truy cập một website.

Ví dụ:

google.com
github.com
youtube.com

Nếu không có Domain, người dùng có thể phải nhớ địa chỉ IP của Server:

142.xxx.xxx.xxx

Điều này rõ ràng khó nhớ và khó sử dụng.

Vì vậy:

Domain
↓
Dễ nhớ đối với con người

trong khi:

IP Address
↓
Được sử dụng để xác định địa chỉ trên mạng

2. Domain không phải là Website

Một điểm cần phân biệt:

Domain không phải Website.

Ví dụ:

google.com

là một Domain.

Website là hệ thống gồm nhiều thành phần như:

• HTML
• CSS
• JavaScript
• Images
• Server
• Database
• API
• Và nhiều thành phần khác

Domain chỉ là địa chỉ giúp người dùng truy cập đến hệ thống đó.

Có thể hình dung:

Domain
   ↓
Địa chỉ
   ↓
Server
   ↓
Website / Application

3. Domain và IP có mối quan hệ gì?

Giả sử một Server có địa chỉ:

142.xxx.xxx.xxx

Thay vì yêu cầu người dùng nhập địa chỉ này, chúng ta có thể sử dụng Domain:

example.com

DNS sẽ giúp tìm thông tin tương ứng:

example.com
      ↓
     DNS
      ↓
142.xxx.xxx.xxx

Sau khi có thông tin cần thiết, Browser có thể tiếp tục quá trình kết nối đến Server.

4. DNS là gì?

DNS – Domain Name System là hệ thống phân giải tên miền và quản lý các thông tin liên quan đến Domain.

Nói đơn giản:

DNS giống như một hệ thống “danh bạ” của Internet.

Con người nhớ:

google.com

DNS giúp hệ thống tìm thông tin mạng tương ứng với Domain đó.

Có thể hình dung:

Domain
  │
  │ DNS Lookup
  ▼
IP Address
  │
  ▼
Server

5. Tại sao không sử dụng IP luôn?

Một câu hỏi khá hợp lý:

Nếu Server đã có IP thì tại sao không dùng IP thay cho Domain?

Có một số lý do.

IP khó nhớ

So sánh:

142.250.xxx.xxx

với:

google.com

Domain dễ nhớ hơn rất nhiều.

Hạ tầng có thể thay đổi

Website có thể thay đổi Server hoặc hạ tầng phía sau.

Nếu người dùng truy cập bằng Domain, thông tin DNS có thể được cập nhật để hướng người dùng đến hạ tầng mới mà người dùng không cần biết chi tiết.

Một Domain có thể liên quan đến nhiều hệ thống

Website hiện đại thường không chỉ có một Server duy nhất.

Có thể có:

User
  ↓
Domain
  ↓
Load Balancer / CDN / Server Infrastructure

Vì vậy Domain giúp tách địa chỉ mà người dùng sử dụng khỏi chi tiết hạ tầng phía sau.

6. DNS Resolution hoạt động như thế nào?

Giả sử bạn nhập:

https://example.com

Browser cần biết thông tin mạng tương ứng với example.com.

Quá trình này được gọi là DNS Resolution.

Ở mức đơn giản:

Browser
   │
   │ example.com
   ▼
DNS Resolver
   │
   │ tìm thông tin
   ▼
DNS Infrastructure
   │
   │ IP / DNS Record
   ▼
Browser

Sau khi có thông tin cần thiết, Browser có thể tiếp tục quá trình kết nối đến Server.

7. DNS Resolver là gì?

DNS Resolver là thành phần thực hiện việc tìm kiếm thông tin DNS thay cho Client.

Khi Browser cần phân giải Domain, yêu cầu DNS có thể được gửi đến một Recursive DNS Resolver.

Ví dụ:

Browser
   ↓
DNS Resolver
   ↓
DNS Infrastructure
   ↓
IP / DNS Record
   ↓
Browser

Resolver có thể sử dụng Cache để trả lời nhanh hơn nếu thông tin đã được lưu trước đó.

Điều này giúp giảm số lần phải thực hiện quá trình phân giải DNS đầy đủ.

8. DNS không chỉ lưu IP

Một hiểu lầm phổ biến là:

DNS chỉ dùng để chuyển Domain thành IP.

Thực tế DNS hỗ trợ nhiều loại DNS Record khác nhau.

Một số loại phổ biến:

Record	Mục đích khái quát
A	Domain → IPv4
AAAA	Domain → IPv6
CNAME	Alias của một Domain
MX	Xác định Mail Server
TXT	Lưu thông tin dạng text cho nhiều mục đích

Ví dụ:

example.com
    │
    ├── A
    ├── AAAA
    ├── MX
    └── TXT

Frontend Developer không nhất thiết phải cấu hình tất cả các Record này ngay từ đầu, nhưng nên biết chúng tồn tại và hiểu mục đích cơ bản của chúng.

9. A Record

A Record thường được sử dụng để trỏ Domain đến một địa chỉ IPv4.

Ví dụ:

example.com
      ↓
A Record
      ↓
192.0.2.1

Có thể hiểu:

“Khi tìm IPv4 của example.com, hãy sử dụng địa chỉ này.”

10. AAAA Record

AAAA Record có vai trò tương tự A Record nhưng dành cho IPv6.

example.com
      ↓
AAAA Record
      ↓
IPv6 Address

Sự tồn tại của A và AAAA liên quan đến hai phiên bản địa chỉ IP:

IPv4
↓
A Record

IPv6
↓
AAAA Record

11. CNAME Record

CNAME – Canonical Name được sử dụng để tạo Alias cho một Domain.

Ví dụ đơn giản:

www.example.com
       ↓
CNAME
       ↓
example.com

Điều này cho phép một tên miền phụ trỏ đến một tên miền khác thay vì trực tiếp trỏ đến IP.

12. MX Record

MX – Mail Exchange liên quan đến hệ thống email.

Ví dụ:

example.com
      ↓
MX Record
      ↓
Mail Server

Khi gửi email đến:

[email protected]

MX Record giúp hệ thống xác định Mail Server chịu trách nhiệm nhận email cho Domain đó.

Frontend Developer không cần đi sâu vào cấu hình MX ở giai đoạn này, nhưng đây là ví dụ cho thấy:

DNS không chỉ phục vụ Website.

13. TXT Record

TXT Record cho phép Domain lưu trữ thông tin dạng text.

Nó được sử dụng cho nhiều mục đích khác nhau, chẳng hạn như:

• Xác minh quyền sở hữu Domain
• Cấu hình một số dịch vụ
• Email authentication
• Các thông tin liên quan đến Domain

Một ví dụ phổ biến là khi một dịch vụ yêu cầu bạn thêm một đoạn TXT vào DNS để chứng minh rằng bạn sở hữu Domain.

14. DNS Cache

Nếu mỗi lần truy cập Website Browser đều phải thực hiện lại toàn bộ quá trình DNS Lookup, việc truy cập sẽ không hiệu quả.

Vì vậy DNS sử dụng Caching.

Thông tin DNS có thể được Cache ở nhiều nơi.

Ví dụ khái quát:

Browser
   ↓
Local / OS Cache
   ↓
DNS Resolver Cache
   ↓
DNS Infrastructure

Nếu thông tin đã có trong Cache và vẫn còn hiệu lực, hệ thống có thể sử dụng lại thông tin đó thay vì thực hiện lại quá trình phân giải từ đầu.

15. TTL là gì?

DNS Cache không được lưu vĩnh viễn.

DNS Record có một giá trị gọi là TTL – Time To Live, xác định khoảng thời gian mà thông tin có thể được Cache.

Ví dụ:

DNS Record
TTL = 3600

Có thể hiểu đơn giản rằng thông tin này có thể được Cache trong một khoảng thời gian nhất định trước khi cần kiểm tra lại.

TTL đóng vai trò quan trọng khi thay đổi DNS.

Ví dụ:

Domain
   ↓
Server cũ

Sau khi thay đổi:

Domain
   ↓
Server mới

Các DNS Resolver đang Cache thông tin cũ có thể chưa cập nhật ngay lập tức.

Đó là một trong những lý do thay đổi DNS đôi khi không có hiệu lực ngay với tất cả người dùng.

16. Domain có cấu trúc như thế nào?

Hãy nhìn vào Domain:

www.example.com

Có thể phân tích thành:

www
 │
 └── Subdomain

example
 │
 └── Domain name

.com
 │
 └── Top-Level Domain (TLD)

Subdomain

www.example.com
api.example.com
blog.example.com

Các Subdomain có thể được sử dụng cho những mục đích khác nhau.

Ví dụ:

example.com
      │
      ├── www.example.com
      ├── api.example.com
      └── blog.example.com

TLD

Phần cuối của Domain như:

.com
.org
.net
.vn

được gọi là Top-Level Domain.

17. Domain và Subdomain trong ứng dụng Web

Trong một ứng dụng thực tế, chúng ta có thể gặp cấu trúc:

example.com

Website chính.

api.example.com

API Server.

admin.example.com

Trang quản trị.

blog.example.com

Blog.

Nhờ Domain và Subdomain, các hệ thống có thể được tổ chức thành những phần khác nhau nhưng vẫn thuộc cùng một Domain.

18. DNS nằm ở đâu trong quá trình truy cập Website?

Bây giờ chúng ta có thể nối kiến thức của ba bài lại.

Khi người dùng nhập:

https://example.com

quá trình đơn giản hóa:

User
  │
  ▼
Browser
  │
  │ Domain
  ▼
DNS
  │
  │ IP / DNS information
  ▼
Server
  │
  │ HTTPS Request
  ▼
Response
  │
  ▼
Browser

Trong đó:

• Domain giúp con người dễ dàng truy cập.
• DNS giúp tìm thông tin mạng tương ứng.
• IP giúp xác định địa chỉ trên mạng.
• HTTPS giúp Client và Server giao tiếp an toàn.

19. Một ví dụ hoàn chỉnh

Giả sử người dùng truy cập:

https://shop.example.com/products

Bước 1 – Browser nhận URL

https://shop.example.com/products

Browser xác định Domain:

shop.example.com

Bước 2 – DNS Lookup

Browser hoặc hệ điều hành cần tìm thông tin DNS tương ứng với Domain.

shop.example.com
        ↓
       DNS
        ↓
IP / DNS information

Bước 3 – Kết nối đến hệ thống đích

Sau khi có thông tin cần thiết, Browser có thể kết nối đến hệ thống phục vụ Website.

Bước 4 – HTTPS Request

Browser gửi Request thông qua HTTPS.

Browser
   │
   │ HTTPS Request
   ▼
Server

Bước 5 – Server Response

Server xử lý và trả Response:

Server
   │
   │ HTTPS Response
   ▼
Browser

Bước 6 – Browser hiển thị

Browser tiếp tục xử lý HTML, CSS, JavaScript và các tài nguyên liên quan để tạo ra giao diện.

Phần này sẽ được tìm hiểu kỹ hơn trong bài Browser Fundamentals.

20. Những gì Frontend Developer cần nhớ

Ở góc độ Frontend Developer, bạn chưa cần trở thành chuyên gia DNS.

Nhưng nên nắm được:

Domain
   ↓
DNS
   ↓
IP / DNS Records
   ↓
Server
   ↓
HTTPS
   ↓
Website / API

Đặc biệt cần phân biệt:

Khái niệm	Vai trò
Domain	Tên dễ nhớ để truy cập hệ thống
IP	Địa chỉ mạng
DNS	Hệ thống phân giải và quản lý thông tin Domain
DNS Record	Các bản ghi chứa thông tin DNS
A	Domain → IPv4
AAAA	Domain → IPv6
CNAME	Alias → Domain khác
MX	Mail Server
TXT	Thông tin text cho nhiều mục đích
TTL	Thời gian Cache DNS

21. Kết luận

Internet sử dụng địa chỉ IP để các thiết bị có thể giao tiếp, nhưng con người không muốn phải ghi nhớ những dãy số phức tạp.

Domain giải quyết vấn đề về khả năng ghi nhớ, còn DNS đóng vai trò kết nối Domain với thông tin mạng cần thiết.

Có thể tóm tắt:

Con người
   │
   │ Domain
   ▼
  DNS
   │
   │ IP / DNS Information
   ▼
Network
   │
   ▼
Server
   │
   │ HTTPS
   ▼
Browser

Nếu coi Internet giống như một thành phố khổng lồ:

• Domain giống như tên của một địa điểm.
• IP giống như địa chỉ của địa điểm đó.
• DNS giống như hệ thống tra cứu giúp tìm địa chỉ từ tên.
• HTTPS là cách giao tiếp được bảo vệ khi gửi và nhận dữ liệu.

Nhưng sau khi Browser tìm được Server và nhận dữ liệu, vẫn còn một câu hỏi lớn:

Browser làm gì với HTML, CSS và JavaScript để biến chúng thành một website mà chúng ta nhìn thấy trên màn hình?

Đó sẽ là nội dung của bài tiếp theo:

Browser Fundamentals – Điều gì xảy ra khi bạn nhập một URL?

Bài 4: Browser Fundamentals

 

Ở những bài trước, chúng ta đã tìm hiểu:

• Internet là gì và Website hoạt động như thế nào?
• Client và Server giao tiếp với nhau thông qua HTTP/HTTPS ra sao?
• Domain được DNS phân giải thành địa chỉ IP như thế nào?

Nhưng khi bạn mở trình duyệt và nhập:

https://example.com

thì điều gì thực sự xảy ra phía sau?

Website không xuất hiện ngay lập tức. Trình duyệt phải thực hiện một chuỗi các bước từ tìm Server → kết nối → gửi Request → nhận Response → phân tích HTML/CSS/JavaScript → Render giao diện.

Đây chính là những kiến thức cơ bản của Browser Fundamentals mà Frontend Developer nên hiểu.

1. Browser là gì?

Browser hay Web Browser là phần mềm cho phép người dùng truy cập và tương tác với các Website trên Internet.

Một số trình duyệt phổ biến:

• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Safari
• Opera

Nhưng Browser không chỉ đơn giản là một phần mềm “mở Website”.

Nó phải thực hiện rất nhiều công việc như:

• Gửi Request đến Server
• Nhận dữ liệu từ Server
• Phân tích HTML
• Phân tích CSS
• Thực thi JavaScript
• Quản lý hình ảnh, font, video và các tài nguyên khác
• Tạo giao diện Website
• Xử lý sự kiện người dùng
• Quản lý Cookie, Cache và Storage

Có thể hiểu đơn giản:

Browser là môi trường giúp Website từ dữ liệu trên Server trở thành giao diện mà người dùng có thể nhìn thấy và tương tác.

2. Browser hoạt động như thế nào?

Hãy tưởng tượng bạn nhập:

https://example.com

vào thanh địa chỉ.

Một cách đơn giản hóa, quá trình sẽ giống như sau:

Người dùng nhập URL
        ↓
Browser phân tích URL
        ↓
DNS tìm địa chỉ IP
        ↓
Thiết lập kết nối mạng
        ↓
Gửi HTTP/HTTPS Request
        ↓
Server xử lý Request
        ↓
Server trả Response
        ↓
Browser nhận HTML
        ↓
Phân tích HTML → DOM
        ↓
Phân tích CSS → CSSOM
        ↓
DOM + CSSOM
        ↓
Render Tree
        ↓
Layout
        ↓
Paint
        ↓
Hiển thị Website

Trong thực tế, quá trình này phức tạp hơn và nhiều bước có thể diễn ra song song hoặc lặp lại.

3. Bước 1 – Browser phân tích URL

Khi bạn nhập:

https://example.com/products

Browser cần xác định các thành phần của URL.

Ví dụ:

https://example.com/products
│       │           │
│       │           └── Path
│       └────────────── Domain
└────────────────────── Protocol

Trong đó:

• https → Protocol
• example.com → Domain
• /products → Path

Browser dựa vào những thông tin này để biết cần sử dụng giao thức nào và truy cập tài nguyên nào.

4. Bước 2 – Browser tìm địa chỉ IP

Browser cần biết Server đang ở đâu.

Domain:

example.com

không phải địa chỉ mà máy tính trực tiếp sử dụng để định tuyến mạng.

Browser có thể cần thực hiện DNS lookup để tìm các DNS record phù hợp, từ đó xác định địa chỉ mạng cần kết nối.

Ví dụ đơn giản:

example.com
     ↓
    DNS
     ↓
IP của hệ thống cung cấp Website

Ngoài DNS, Browser và hệ điều hành còn có thể sử dụng các thông tin đã được Cache trước đó để tránh phải thực hiện lại quá trình phân giải.

Đây là lý do kiến thức về DNS & Domain ở bài trước rất quan trọng khi tìm hiểu Browser.

5. Bước 3 – Thiết lập kết nối

Sau khi biết nơi cần kết nối, Browser tiến hành thiết lập kết nối mạng.

Với HTTPS, quá trình này bao gồm cơ chế bảo mật TLS để bảo vệ dữ liệu trong quá trình truyền.

Ở mức cơ bản, có thể hình dung:

Browser
   ↓
Kết nối đến Server
   ↓
Thiết lập bảo mật TLS
   ↓
Sẵn sàng trao đổi dữ liệu

Trong các hệ thống Web hiện đại, cách thiết lập kết nối còn phụ thuộc vào giao thức được sử dụng. Ví dụ HTTP/3 sử dụng QUIC thay vì mô hình TCP truyền thống.

Ở giai đoạn học Frontend cơ bản, bạn chỉ cần nhớ:

Browser phải thiết lập một kết nối phù hợp và an toàn trước khi trao đổi dữ liệu với Server.

6. Bước 4 – Browser gửi Request

Sau khi có kết nối, Browser gửi Request đến Server.

Ví dụ đơn giản:

GET /products HTTP/1.1
Host: example.com

Browser đang nói với Server rằng:

“Tôi muốn lấy tài nguyên /products.”

Request có thể chứa nhiều thông tin khác như:

• Method
• URL
• Headers
• Cookies
• Body

Ví dụ khi người dùng mở Website, Browser thường thực hiện các Request để lấy:

HTML
CSS
JavaScript
Images
Fonts
Videos
API data

7. Bước 5 – Server trả Response

Server nhận Request, xử lý và gửi Response trở lại Browser.

Ví dụ:

Browser
   │
   │ Request
   ↓
Server
   │
   │ Response
   ↓
Browser

Response có thể chứa:

HTML
JSON
CSS
JavaScript
Images
...

Ví dụ Server có thể trả về HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Lúc này công việc quan trọng của Browser mới thực sự bắt đầu.

8. Browser nhận HTML

Browser nhận HTML từ Server và bắt đầu phân tích nó.

Ví dụ:

<body>
    <h1>Hello World</h1>
    <p>Welcome to my website</p>
</body>

Browser không đơn giản đọc đoạn code này rồi hiển thị nguyên văn.

Nó sẽ phân tích cấu trúc HTML và tạo ra một cấu trúc dữ liệu gọi là DOM.

9. DOM là gì?

DOM là viết tắt của:

Document Object Model

DOM là mô hình đối tượng đại diện cho cấu trúc của tài liệu HTML.

Ví dụ HTML:

<body>
    <h1>Hello</h1>
    <p>Welcome</p>
</body>

Có thể hình dung DOM:

Document
   │
   └── html
        │
        └── body
             ├── h1
             │    └── "Hello"
             │
             └── p
                  └── "Welcome"

Nhờ DOM, JavaScript có thể truy cập và thay đổi nội dung Website.

Ví dụ:

document.querySelector("h1").textContent = "Hello Khoa";

Browser sẽ cập nhật DOM:

Hello
   ↓
Hello Khoa

Đây chính là nền tảng của việc JavaScript tương tác với giao diện Web.

10. CSS được xử lý như thế nào?

HTML giúp Browser hiểu:

Website có những phần tử nào?

CSS giúp Browser hiểu:

Những phần tử đó nên được hiển thị như thế nào?

Ví dụ:

h1 {
    color: red;
    font-size: 32px;
}

Browser cũng phân tích CSS và xây dựng một cấu trúc dữ liệu gọi là CSSOM – CSS Object Model.

Có thể hình dung:

HTML
 ↓
DOM

CSS
 ↓
CSSOM

DOM chứa thông tin về cấu trúc tài liệu.

CSSOM chứa thông tin về các quy tắc CSS được áp dụng.

11. DOM + CSSOM → Render Tree

Browser cần kết hợp thông tin từ DOM và CSSOM để xác định những gì cần được hiển thị.

Ở mức khái niệm:

DOM + CSSOM
      ↓
 Render Tree

Render Tree chứa các phần tử cần tham gia vào quá trình hiển thị.

Ví dụ:

<h1>Hello</h1>

<p>Welcome</p>

<p style="display: none">
    Hidden
</p>

Phần tử:

display: none;

không được hiển thị nên không tham gia vào Render Tree theo cách các phần tử đang hiển thị tham gia.

Điều này cho thấy:

DOM và những gì thực sự được render trên màn hình không hoàn toàn giống nhau.

12. Layout – Browser tính toán vị trí

Sau khi biết những gì cần hiển thị, Browser cần tính toán kích thước và vị trí của các phần tử.

Ví dụ:

┌──────────────────────────────┐
│          Header              │
├──────────────────────────────┤
│                              │
│          Content             │
│                              │
├──────────────────────────────┤
│          Footer              │
└──────────────────────────────┘

Browser cần tính toán:

• Chiều rộng
• Chiều cao
• Vị trí
• Khoảng cách
• Margin
• Padding
• Font size
• Các thuộc tính layout như Flexbox/Grid

Quá trình này thường được gọi là Layout.

13. Paint – Vẽ giao diện

Sau khi biết vị trí và kích thước của các phần tử, Browser cần vẽ chúng.

Ví dụ:

Text
Background
Border
Shadow
Image
...

Quá trình này được gọi là Paint.

Có thể hình dung:

DOM
 ↓
CSSOM
 ↓
Render Tree
 ↓
Layout
 ↓
Paint
 ↓
Giao diện trên màn hình

Trong các trình duyệt hiện đại còn có bước Compositing, trong đó các phần của giao diện có thể được kết hợp thành các layer để hiển thị hiệu quả hơn.

14. JavaScript được thực thi ở đâu?

JavaScript đóng vai trò rất quan trọng trong Website hiện đại.

Ví dụ:

const button = document.querySelector("button");

button.addEventListener("click", () => {
    alert("Hello!");
});

Browser sẽ sử dụng JavaScript Engine để thực thi đoạn code này.

Một số JavaScript Engine phổ biến:

Browser	JavaScript Engine
Chrome	V8
Edge	V8
Firefox	SpiderMonkey
Safari	JavaScriptCore

JavaScript có thể:

• Thay đổi DOM
• Thay đổi CSS
• Xử lý sự kiện
• Gọi API
• Thay đổi dữ liệu hiển thị
• Tạo hoặc xóa phần tử
• Thực hiện logic của ứng dụng

Ví dụ:

document.body.style.background = "black";

JavaScript thay đổi giao diện sau khi Website đã được tải.

Đây cũng là nền tảng để chúng ta sau này học:

JavaScript
   ↓
DOM
   ↓
React
   ↓
Next.js

15. Browser không chỉ tải một file HTML

Một Website hiện đại thường không chỉ có HTML.

Ví dụ HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/style.css">
</head>

<body>

    <h1>Hello</h1>

    <img src="/image.jpg">

    <script src="/app.js"></script>

</body>
</html>

Browser có thể tiếp tục thực hiện các Request để lấy:

index.html
     │
     ├── style.css
     ├── image.jpg
     └── app.js

Sau đó JavaScript có thể tiếp tục gọi API:

app.js
   ↓
GET /api/products
   ↓
Server
   ↓
JSON
   ↓
Browser
   ↓
Update UI

Vì vậy, một Website thực tế có thể tạo ra rất nhiều Request trong quá trình hoạt động.

16. Browser Cache

Không phải lần nào Browser cũng phải tải mọi thứ từ Server.

Browser có thể lưu một số tài nguyên vào Cache.

Ví dụ:

Lần đầu:
Browser → Server → image.jpg

Lần sau:
Browser → Cache

Nếu tài nguyên vẫn còn hợp lệ trong Cache, Browser có thể sử dụng lại thay vì tải lại từ Server.

Điều này giúp:

• Website tải nhanh hơn
• Giảm số lượng Request
• Giảm dữ liệu phải truyền
• Cải thiện trải nghiệm người dùng

Đây cũng là lý do đôi khi Developer sửa CSS hoặc JavaScript nhưng Browser vẫn hiển thị phiên bản cũ.

Khi debug, bạn có thể gặp vấn đề liên quan đến Cache.

17. DevTools giúp Frontend Developer quan sát Browser

Một trong những công cụ quan trọng nhất khi làm Frontend là Browser DevTools.

Bạn có thể mở bằng:

F12

hoặc:

Ctrl + Shift + I

Một số tab quan trọng:

Elements

Dùng để xem:

HTML
DOM
CSS

Bạn có thể kiểm tra và thử thay đổi CSS trực tiếp.

Console

Dùng để:

• Xem lỗi JavaScript
• In dữ liệu bằng console.log()
• Kiểm tra lỗi của Website

Ví dụ:

console.log("Hello");

Network

Đây là một tab cực kỳ quan trọng đối với Frontend Developer.

Nó cho phép quan sát:

Request
Response
Status Code
Headers
Payload
Response data
Loading time

Ví dụ:

GET /api/products
Status: 200
Type: fetch
Time: 120 ms

Khi API không hoạt động, Network thường là nơi đầu tiên bạn nên kiểm tra.

Application

Có thể dùng để kiểm tra các dữ liệu phía Client như:

• Cookies
• Local Storage
• Session Storage
• Cache

18. Toàn bộ quá trình khi truy cập Website

Bây giờ hãy kết hợp tất cả những kiến thức đã học.

Giả sử người dùng truy cập:

https://example.com/products

Quá trình có thể khái quát như sau:

1. Người dùng nhập URL
            ↓
2. Browser phân tích URL
            ↓
3. DNS phân giải Domain
            ↓
4. Browser thiết lập kết nối
            ↓
5. HTTPS Request
            ↓
6. Server xử lý
            ↓
7. Server trả Response
            ↓
8. Browser nhận HTML
            ↓
9. HTML → DOM
            ↓
10. CSS → CSSOM
            ↓
11. DOM + CSSOM → Render Tree
            ↓
12. Layout
            ↓
13. Paint
            ↓
14. Website xuất hiện
            ↓
15. JavaScript tiếp tục xử lý
            ↓
16. API / Image / Font / Resource tiếp tục được tải
            ↓
17. UI được cập nhật khi cần

Đây là một phiên bản đơn giản hóa của quá trình thực tế. Browser hiện đại có thể tải tài nguyên song song, sử dụng Cache, thực hiện preload, chạy JavaScript bất đồng bộ và cập nhật giao diện nhiều lần.

19. Frontend Developer cần hiểu Browser để làm gì?

Có thể bạn sẽ thắc mắc:

“Tôi học React/Next.js thì có cần hiểu Browser sâu như vậy không?”

Câu trả lời là có.

Bạn không nhất thiết phải trở thành Browser Engineer, nhưng hiểu Browser giúp bạn hiểu tại sao code Frontend hoạt động như vậy.

Ví dụ:

Khi CSS không hoạt động

Bạn sẽ biết kiểm tra:

DOM
↓
CSS
↓
Computed styles

Khi API không trả dữ liệu

Bạn có thể mở:

DevTools → Network

để kiểm tra Request và Response.

Khi JavaScript báo lỗi

Bạn mở:

DevTools → Console

Khi Website tải chậm

Bạn có thể kiểm tra:

Network
Performance
Resources
Images
JavaScript
CSS

Khi React cập nhật giao diện

Bạn sẽ hiểu rằng phía dưới React vẫn phải tương tác với cơ chế Render của Browser.

Vì vậy, học Browser Fundamentals giúp chúng ta không chỉ biết code, mà còn hiểu code của mình đang chạy ở đâu và được Browser xử lý như thế nào.

20. Một cách ghi nhớ đơn giản

Bạn có thể nhớ toàn bộ Series 1 bằng một chuỗi:

URL
 ↓
DNS
 ↓
IP
 ↓
HTTPS
 ↓
Request
 ↓
Server
 ↓
Response
 ↓
HTML
 ↓
DOM
 ↓
CSSOM
 ↓
Render
 ↓
JavaScript
 ↓
Website

Trong đó:

• DNS giúp tìm địa chỉ cần kết nối.
• HTTPS giúp Browser và Server trao đổi dữ liệu an toàn.
• HTTP Request/Response giúp Client và Server giao tiếp.
• HTML mô tả cấu trúc.
• CSS mô tả cách hiển thị.
• JavaScript xử lý logic và tương tác.
• Browser kết hợp tất cả để tạo ra giao diện mà người dùng nhìn thấy.

Kết luận

Browser không đơn giản là một công cụ để “mở Website”.

Khi bạn nhập một URL, Browser phải thực hiện một chuỗi quá trình:

URL
→ DNS
→ Connection
→ HTTPS
→ Request
→ Response
→ HTML
→ DOM
→ CSSOM
→ Render
→ JavaScript
→ UI

Đây là nền tảng quan trọng để hiểu cách một Website hoạt động từ bên trong.

Đối với Frontend Developer, việc hiểu Browser sẽ giúp bạn dễ dàng hơn khi học:

HTML
CSS
JavaScript
DOM
React
Next.js
Web Performance
Web Security

Và đến đây, chúng ta đã hoàn thành phần Internet Fundamentals của Series 1:

Bài 1: Internet Fundamentals
        ↓
Bài 2: HTTP/HTTPS
        ↓
Bài 3: DNS & Domain
        ↓
Bài 4: Browser Fundamentals

Từ bài tiếp theo, chúng ta có thể bắt đầu đi vào HTML – nền tảng để xây dựng cấu trúc của một Website.