Hành trình của 1 Request: Từ URL đến UI

Đây là câu hỏi phỏng vấn kinh điển (Classic Interview Question). Câu trả lời có thể ngắn gọn trong 1 phút hoặc kéo dài cả tiếng đồng hồ tùy độ sâu.

Chúng ta sẽ đi sâu vào "Hậu trường" của Internet.

1. Phân giải tên miền (DNS Resolution)

Máy tính không hiểu "google.com", nó chỉ hiểu địa chỉ IP (VD: 142.250.190.46).

1. Browser Cache: Trình duyệt check xem bạn đã vào trang này gần đây chưa.
2. OS Cache: Nếu không, nó hỏi Hệ điều hành.
3. Router Cache: Hỏi Router wifi nhà bạn.
4. ISP DNS: Hỏi nhà mạng (VNPT, Viettel).
5. Root DNS -> TLD DNS -> Authoritative DNS: Truy vấn đệ quy để tìm IP cuối cùng.

2. Thiết lập kết nối (TCP/IP & Handshake)

Sau khi có IP, trình duyệt cần "bắt tay" với Server.

TCP 3-Way Handshake (Bắt tay 3 bước)

Để đảm bảo kết nối tin cậy:

1. SYN: Client: "Alo, server nghe không?"
2. SYN-ACK: Server: "Nghe rõ, client nghe không?"
3. ACK: Client: "Ok, bắt đầu nói chuyện nhé."

SSL/TLS Handshake (Bảo mật - HTTPS)

Nếu là HTTPS (Secure), có thêm bước đàm phán mã hóa:

• Client gửi danh sách mã hóa hỗ trợ.
• Server chọn 1 loại, gửi lại Certificate (Chứng chỉ số).
• Hai bên tạo ra "Session Key" để mã hóa dữ liệu.

3. Gửi HTTP Request

Client gửi một "bức thư" yêu cầu nội dung:

GET / HTTP/1.1
Host: google.com
User-Agent: Mozilla/5.0...
Cookie: session_id=xyz...

4. Server Xử lý (Backend Architecture)

Request đến Server, đi qua nhiều lớp:

1. Load Balancer (Nginx/AWS ALB): Điều phối request để không server nào quá tải.
2. Web Server: Chạy code backend (Node.js, Go, Python).
3. Database: Truy vấn dữ liệu.
4. Response: Server trả về HTML/JSON.

5. Browser Rendering (Phía Client)

Trình duyệt nhận về chuỗi HTML raw và bắt đầu vẽ:

Critical Rendering Path (CRP)

Đây là quy trình tối quan trọng để tối ưu Performance.

1. DOM Tree: Parse HTML thành cây cấu trúc.
2. CSSOM Tree: Parse CSS thành cây style.
3. Render Tree: Kết hợp DOM + CSSOM (Chỉ chứa các node hiển thị).
4. Layout (Reflow): Tính toán vị trí hình học (Geometry) của từng phần tử.
5. Paint: Tô màu pixel lên màn hình.
6. Composite: Xếp chồng các layer (nếu có 3D transform, z-index).

Kết luận

Hiểu quy trình này giúp bạn debug tốt hơn:

• Web chậm do DNS? -> Check network tab.
• Web chậm do Server? -> Check TTFB (Time to First Byte).
• Web chậm do Rendering? -> Check Lighthouse & Javascript Bundle.