HTTP, trình duyệt và tài nguyên web: Tất cả những gì bạn cần biết

Nhật Quang · Lúc 12:18:13, Thứ năm

Khi bạn mở một trang web, nhiều thành phần và trao đổi mạng diễn ra phía sau. Bài viết giải thích cách tài nguyên được tải qua giao thức HTTP và cách trình duyệt kết hợp chúng để hiển thị trang.

1. Tổng quan về mô hình client-server trên Internet

Internet hoạt động dựa trên mô hình máy khách (client) và máy chủ (server). Trong mô hình này:

Máy khách là thiết bị gửi yêu cầu để lấy thông tin, chẳng hạn như trình duyệt web (Chrome, Firefox, Safari) hoặc ứng dụng trên điện thoại.
Máy chủ là nơi xử lý yêu cầu và trả về dữ liệu tương ứng. Các máy chủ thường chạy phần mềm như NGINX, Apache, hoặc các framework web như Node.js, Django,...

2. Máy khách, máy chủ và khái niệm tài nguyên

Tài nguyên là bất kỳ nội dung nào có thể được truy cập từ Internet, bao gồm:

File HTML, CSS, JavaScript
Hình ảnh, video, font chữ
API trả về dữ liệu JSON hoặc XML

Một trang web không chỉ là một file HTML đơn lẻ, mà là tập hợp của hàng chục đến hàng trăm tài nguyên mà trình duyệt cần tải về để hiển thị nội dung đầy đủ cho người dùng.

3. URL — địa chỉ định danh tài nguyên

Để truy cập một tài nguyên, máy khách cần biết URL (Uniform Resource Locator) — tức "địa chỉ web". Một URL điển hình gồm:

Giao thức: http:// hoặc https://
Tên miền: example.com
Đường dẫn: /images/photo.jpg
Tham số truy vấn (query): ?version=2

Ví dụ đầy đủ: https://example.com/images/photo.jpg?version=2

4. Giao thức HTTP — cách máy tính trao đổi thông tin

HTTP (Hypertext Transfer Protocol) là giao thức chính để truyền tải dữ liệu trên web. Nó định nghĩa cách:

Máy khách gửi yêu cầu (HTTP request) đến máy chủ
Máy chủ trả về phản hồi (HTTP response) phù hợp

Cả hai bên đều tuân theo một cấu trúc chuẩn để có thể hiểu và xử lý dữ liệu lẫn nhau.

5. Cấu trúc một yêu cầu HTTP

Một yêu cầu HTTP thường gồm các phần chính:

Phương thức (method): Ví dụ GET (lấy dữ liệu), POST (gửi dữ liệu), PUT, DELETE,...
Đường dẫn tài nguyên: /products/123
Header: Cung cấp thông tin bổ sung như:
- Accept: Trình duyệt chấp nhận kiểu nội dung nào (HTML, JSON,...)
- User-Agent: Loại trình duyệt đang sử dụng
- Cookie: Dữ liệu nhận diện người dùng
Body (nội dung yêu cầu): Thường chỉ xuất hiện với các phương thức như POST, khi người dùng gửi dữ liệu (form, file,...).

6. Cookie và vai trò của HTTP header

Cookie là những mẩu dữ liệu nhỏ giúp máy chủ nhận diện người dùng cụ thể (đã đăng nhập, giỏ hàng,...).
Các header khác có thể chỉ định cách thức trình bày (ví dụ định dạng ảnh mong muốn), hỗ trợ caching (lưu tạm thời nội dung), hoặc hỗ trợ bảo mật.

7. Phản hồi HTTP từ máy chủ

Khi nhận được yêu cầu, máy chủ trả lại một HTTP response gồm:

Mã trạng thái (status code): Cho biết kết quả xử lý:
- 200 OK: Thành công
- 404 Not Found: Không tìm thấy tài nguyên
- 500 Internal Server Error: Lỗi máy chủ
Response headers: Ví dụ Content-Type, Cache-Control
Body: Nội dung chính, có thể là HTML, ảnh, JSON, file tải về,...

8. Công cụ kiểm tra yêu cầu/ phản hồi HTTP

Bạn có thể dùng các công cụ để quan sát trực tiếp quá trình gửi nhận dữ liệu:

curl: Công cụ dòng lệnh kiểm tra yêu cầu HTTP
DevTools trong trình duyệt (tab Network): Hiển thị chi tiết tất cả yêu cầu HTTP được gửi khi tải trang, rất hữu ích để debug và tối ưu hóa hiệu suất tải.

9. Trình duyệt dựng trang như thế nào?

Khi nhận được file HTML, trình duyệt sẽ:

Parse (phân tích cú pháp) HTML để tạo DOM (Document Object Model)
Parse CSS để tạo CSSOM (CSS Object Model)
Kết hợp DOM và CSSOM để tạo cây Render Tree
Vẽ (paint) nội dung lên màn hình

Trong quá trình này, trình duyệt sẽ tiếp tục gửi yêu cầu để tải các tài nguyên tham chiếu trong HTML như CSS, JavaScript, hình ảnh,...

10. Tải nhiều tài nguyên và mối quan hệ phụ thuộc

Các tài nguyên có thể tải đồng thời(song song), nhưng một số lại phụ thuộc nhau:
- Ví dụ: File JavaScript có thể tạo ra thêm yêu cầu khác, hoặc làm trì hoãn việc render trang.
Công cụ như request waterfall (biểu đồ thác nước) giúp hình dung quá trình tải từng tài nguyên, từ đó xác định điểm nghẽn hiệu suất.