Web hoạt động thế nào

Từ lúc bạn gõ một địa chỉ tới lúc trang hiện ra, có nhiều bước hơn bạn tưởng.

10 phút đọc

4 câu quiz

Chưa bắt đầu

Điều kiện hoàn thành & nhận XP

Đọc hết 100% nội dung bài
Hoàn thành "Kiểm tra nhanh" (0/4 câu)

Vì sao bài này quan trọng

Không có bức tranh này thì mọi lỗi web đều là bí ẩn: trang trắng, ảnh không hiện, biểu mẫu gửi đi không thấy gì. Biết trang được dựng qua những bước nào giúp bạn hỏi đúng câu hỏi thay vì thử ngẫu nhiên.

Bắt đầu bằng một câu hỏi

Bạn mở một trang web trên điện thoại. Trước khi hiện ra trên màn hình, trang đó đang nằm ở đâu?

Trước khi viết thẻ HTML đầu tiên, hãy trả lời một câu ít người mới đặt ra: từ lúc gõ địa chỉ tới lúc trang hiện ra, chuyện gì xảy ra?

Bốn bước

Tra địa chỉ bạn gõ ra số hiệu máy chủ (DNS).
Gửi yêu cầu HTTP kèm đường dẫn cần lấy - HTTPS là bản Encryption, người ở giữa không đọc hay sửa được.
Máy chủ trả về HTML kèm một mã trạng thái.
Trình duyệt đọc HTML, tải thêm những gì nó nhắc tới, dựng cây rồi vẽ ra.

Một trang là nhiều yêu cầu

Máy chủ không gửi cả trang trong một gói. Nó gửi HTML, rồi trình duyệt xin thêm từng tệp CSS, từng ảnh, từng phông chữ - mỗi thứ một yêu cầu riêng.

Mã trạng thái - đọc chữ số đầu

Bạn sẽ đọc chúng mỗi ngày

Chạm hoặc di chuột vào từng dòng

Nhóm 2200: Thành công.
Nhóm 3301, 302: Chuyển hướng - trình duyệt tự đi theo địa chỉ mới.
Nhóm 4404, 403: Lỗi phía người gửi: không tìm thấy, không có quyền.
Nhóm 5500, 502: Lỗi phía máy chủ khi xử lý một yêu cầu hợp lệ.

404 nghĩa là máy chủ vẫn sống và vẫn trả lời - chỉ đường dẫn là không có gì. Khác hẳn mất mạng hay máy chủ chết, và cần cách xử lý khác.

Dừng & Kiểm tra

Điểm giữa bài

Nhóm mã trạng thái bắt đầu bằng số 5 nói lên điều gì?

Từ HTML tới cây tài liệu

Trình duyệt không vẽ thẳng từ văn bản HTML. Nó dựng một cây trong bộ nhớ - mỗi thẻ là một nút - rồi vẽ từ cây đó. Mã lệnh trên trang sửa cây này chứ không sửa tệp gốc, nên nội dung đổi được mà không cần tải lại.

Bộ nhớ đệm, kẻ thù lúc học

Trình duyệt giữ lại tệp tĩnh để lần sau khỏi tải. Đổi CSS mà giao diện không nhúc nhích thì nghi nó trước tiên.

Bốn bước này lặp lại mỗi lần bạn mở một trang, và chúng là bản đồ để định vị mọi lỗi trong chặng.

Bài sau bạn viết tệp HTML đầu tiên và thấy nó hiện ra trong trình duyệt.

Sơ đồ trực quan

01Trình duyệt tra địa chỉ ra số hiệu máy chủ

02Gửi một yêu cầu qua giao thức HTTP

03Máy chủ trả về HTML, rồi CSS và ảnh

04Trình duyệt dựng cây tài liệu và vẽ ra màn hình

Ví dụ thực tế · Mọi trang bạn mở

Mở công cụ dành cho nhà phát triển của trình duyệt, sang thẻ mạng rồi tải lại một trang bất kỳ. Bạn sẽ thấy hàng chục yêu cầu chứ không phải một: tệp HTML, các tệp CSS, phông chữ, ảnh, và thường là rất nhiều tệp JavaScript.