Web hoạt động thế nào? Hành trình 200ms từ gõ URL tới thấy trang
Khi bạn gõ địa chỉ web, 5 bước xảy ra trong khoảng 200 mili-giây giữa trình duyệt, DNS và máy chủ — hiểu được 5 bước này giúp bạn biết web chậm vì lý do gì.
Mục lục bài viết(12)
Trình duyệt là phần mềm bạn dùng hàng ngày để xem web — Safari, Chrome, Firefox, Edge. Mọi thứ trong ảnh này (header, menu, nội dung, ảnh) là kết quả của chuỗi 5 bước mà bạn sắp đọc, xảy ra trong khoảng 200 mili-giây. Nguồn: Wikimedia Commons (CC BY-SA 3.0 / public domain).
Hiểu đơn giản nhất
Khi bạn mở một trang web, năm "nhân vật" hoạt động cùng nhau:
| Nhân vật | Là gì | Trong câu chuyện gọi đồ ăn |
|---|---|---|
| Trình duyệt | Chrome / Safari / Firefox / Edge | App giao đồ ăn trên điện thoại bạn |
| DNS | Hệ thống danh bạ tên miền | Tổng đài tra cứu địa chỉ quán |
| Internet | Cáp + router toàn cầu | Tuyến đường shipper đi qua |
| Máy chủ | Máy tính chạy 24/7 ở data center | Bếp của quán ăn |
| Database | Kho lưu dữ liệu của trang | Tủ lạnh nguyên liệu của bếp |
Mỗi lần bạn gõ một URL, năm nhân vật này phối hợp trong khoảng 200 mili-giây để giao "món ăn" (trang web) tới bạn.
Tại sao bạn cần biết
- Phân biệt được lỗi của ai khi web sập. Cloudflare hiện 502 = lỗi server gốc. Trình duyệt hiện "DNS_PROBE_FINISHED" = lỗi DNS. "Connection timeout" = lỗi mạng. Mỗi loại có cách xử lý khác.
- Hiểu tại sao web chậm. Mạng nhanh không cứu được khi server bận, DNS lỗi hay trang quá nặng JavaScript. Biết nguyên nhân giúp bạn yêu cầu fix đúng chỗ.
- Biết khi nào cần CDN, cache, hosting tốt hơn. Mỗi tối ưu nhằm vào 1 bước cụ thể trong chuỗi. Không hiểu chuỗi thì không biết tối ưu cái nào trước.
- Tự tin nói chuyện với agency và dev. Khi họ nói "page load TTFB cao", "DNS chưa propagate", "phải warm cache" — bạn biết họ đang đề cập tới bước nào.
5 bước khi mở một trang web
Hãy theo dõi điều xảy ra khi bạn gõ wiki.vietcodex.com và bấm Enter.
Bước 1: Trình duyệt cần biết server ở đâu
Trình duyệt là phần mềm trên máy bạn — Chrome, Safari, Firefox, Edge, Brave. Khi bạn gõ một URL, trình duyệt KHÔNG biết máy chủ của trang đó nằm ở đâu.
Nó chỉ biết tên: wiki.vietcodex.com. Cần dịch tên thành địa chỉ IP (104.21.96.235) thì mới gửi yêu cầu được. Đây là việc của DNS.
Bước 2: Hỏi DNS để dịch tên miền thành IP
DNS là hệ thống danh bạ của Internet. Trình duyệt hỏi từng tầng cho tới khi có câu trả lời:
- DNS cache trên máy bạn — cache (bộ đệm lưu tạm để tăng tốc). Nếu vừa truy cập domain này, có sẵn trong RAM, trả lời tức thì (0ms).
- DNS resolver nhà mạng — Viettel, FPT, VNPT có server DNS riêng. Hỏi họ trước khi đi xa hơn (5-20ms).
- Root DNS → TLD
.comDNS → Authoritative DNS của vietcodex.com — chuỗi này chỉ chạy khi cache hết hạn (30-100ms).
Câu trả lời: wiki.vietcodex.com → 104.21.96.235. Trình duyệt nhớ lại trong vài phút để lần sau hỏi đỡ tốn thời gian.
Sơ đồ DNS lookup tuần tự: trình duyệt hỏi DNS resolver (nhà mạng), resolver hỏi tiếp Root DNS → TLD DNS (.com, .vn) → Authoritative DNS (vietcodex.com) cho đến khi có IP cuối cùng. Mỗi mũi tên là một packet trao đổi, tổng cộng vài chục mili-giây nếu chưa cache. Nguồn: Wikimedia Commons (public domain).
Bước 3: Mở kết nối an toàn tới máy chủ (TCP + HTTPS)
Có IP rồi, trình duyệt gửi yêu cầu. Nhưng trước đó cần "bắt tay" với server qua hai cú handshake:
- TCP handshake (3 packet trao đổi) — TCP (Transmission Control Protocol — giao thức truyền tin cậy). Đảm bảo cả hai bên sẵn sàng nhận dữ liệu.
- TLS handshake (HTTPS) — TLS (Transport Layer Security — phiên bản mới của SSL). HTTPS (giao thức web có mã hoá). Trao đổi khoá mã hoá để dữ liệu không bị đọc lén giữa đường.
Tổng cộng khoảng 50-150ms cho 2 bước này. Khi handshake xong, biểu tượng ổ khoá trên thanh địa chỉ chuyển sang đóng — báo hiệu kết nối an toàn.
Biểu tượng ổ khoá bên trái URL là dấu hiệu HTTPS đã thiết lập an toàn — dữ liệu giữa trình duyệt và server được mã hoá, không ai giữa đường (nhà mạng, hacker Wifi công cộng) đọc trộm được. Nguồn: Wikimedia Commons (CC BY-SA 4.0).
Bước 4: Máy chủ xử lý yêu cầu và trả về HTML
Máy chủ nhận được yêu cầu GET /co-ban/web-hoat-dong-the-nao. Nó:
- Đọc cấu hình route — file MDX nào ứng với URL này
- Đọc file MDX + database (lấy danh sách bài liên quan, sidebar...)
- Dựng HTML cuối cùng từ template + dữ liệu
- Gửi HTML về cho trình duyệt
Thời gian này gọi là TTFB (Time To First Byte) — thường 100-500ms tuỳ độ phức tạp và tải server. Trang web nào TTFB > 1 giây là dấu hiệu server đang chậm.
Bước 5: Trình duyệt "vẽ" trang web ra màn hình
Trình duyệt nhận HTML và bắt đầu render:
- Parse HTML thành cây DOM (Document Object Model)
- Tải CSS và áp dụng style cho cây DOM
- Tải JavaScript và chạy code
- Tải ảnh, font, video song song
- Vẽ pixels lên màn hình
Đây là bước có thể chậm nhất nếu trang có nhiều ảnh nặng hoặc JavaScript phức tạp. Tổng thời gian từ Bước 1 đến đủ pixel để bạn đọc được gọi là LCP (Largest Contentful Paint) — Google đo chỉ số này để đánh giá tốc độ trang.
Cây DOM — cấu trúc bên trong mà trình duyệt tạo ra từ HTML. Mỗi node là một phần tử (html, head, body, div, p...). CSS áp dụng style theo cây này, JavaScript đọc và sửa cây này, render engine vẽ pixel theo cây này. Mọi tương tác bạn thấy trên web đều là thao tác trên DOM. Nguồn: Wikimedia Commons (CC BY-SA 3.0).
Ví dụ thực tế
Khi bạn truy cập https://wiki.vietcodex.com/co-ban/web-hoat-dong-the-nao lần đầu trên 4G ở Việt Nam, đây là phân bố thời gian điển hình:
| Bước | Thời gian |
|---|---|
| DNS lookup (lần đầu) | 40-80ms |
| TCP + TLS handshake | 80-150ms |
| TTFB (server xử lý + trả HTML) | 150-300ms |
| Tải CSS + JS + font (parallel) | 200-500ms |
| Render + tải ảnh lazy | 100-300ms |
| Tổng | 600-1300ms |
Lần thứ hai bạn truy cập, DNS đã cache + một số tài nguyên đã cache → còn 200-400ms.
Cái gì có thể sai ở mỗi bước
| Bước | Lỗi điển hình | Cách xử lý |
|---|---|---|
| 1. Gõ URL | Sai chính tả | Dùng bookmark hoặc search trên Google |
| 2. DNS | DNS nhà mạng chậm/lỗi | Đổi DNS thiết bị sang 1.1.1.1 (Cloudflare) hoặc 8.8.8.8 (Google) |
| 3. TCP/TLS | Chứng chỉ SSL hết hạn | Báo cho chủ trang web — họ phải gia hạn |
| 4. Server | TTFB cao, 500, 502, 503 | Nâng cấp hosting (lưu trữ), thêm cache (Redis), dùng CDN (Content Delivery Network — mạng phân phối nội dung) |
| 5. Render | Ảnh quá nặng, JS chặn | Lazy load ảnh, gộp file JS, dùng AVIF/WebP |
Mỗi loại lỗi có "chữ ký" riêng trên thanh URL hoặc trong DevTools — và biết nó ở bước nào giúp bạn yêu cầu fix đúng chỗ thay vì "web sập, mạng lỗi gì đó".
Tóm tắt 1 dòng
Mở một trang web là chuỗi 5 bước: tra DNS (bước 2) → bắt tay an toàn TCP/TLS (bước 3) → server xử lý và trả HTML (bước 4) → trình duyệt vẽ pixels (bước 5). Mỗi bước có thể chậm hoặc lỗi riêng — biết bước nào giúp bạn fix đúng chỗ.
Đọc tiếp
- Internet là gì? Hoạt động ra sao — nền tảng mạng máy tính giúp 5 bước này khả thi
- Frontend vs Backend khác nhau ở đâu — "trình duyệt" và "server" trong vai trò front/back (sắp có)
- API là gì? Tại sao mọi app đều cần — cách trang web nói chuyện với server sau khi load (sắp có)
- Domain, Hosting, DNS — 3 thứ bạn mua — phân biệt 3 dịch vụ thường nhầm lẫn (sắp có)