🧭 Thứ tự tải và xử lý trong file HTML
Trong 01 file HTML, trình duyệt sẽ tải và xử lý các phần theo một trình tự nhất định.
Dưới đây là thứ tự tải cơ bản, kèm giải thích chi tiết:
🧭 Thứ tự tải và xử lý trong file HTML
| 🔢 | 🧩 Phần | 📜 Mô tả chi tiết |
|---|---|---|
| 1️⃣ | <!DOCTYPE> |
Trình duyệt nhận dạng loại tài liệu HTML (HTML5 hoặc cũ hơn) |
| 2️⃣ | <html> mở đầu |
Bắt đầu cấu trúc tài liệu |
| 3️⃣ | <head> |
Tải các metadata như charset, tiêu đề, link CSS, script... |
| 4️⃣ | <meta> và <title> |
Thông tin về mã hóa và tiêu đề trang |
| 5️⃣ | <link rel="stylesheet" href="styles.css"> | Trình duyệt tải CSS đồng bộ (chặn render đến khi CSS được tải xong) |
| 6️⃣ | <> trong <head> (nếu không có async/defer) |
Tải và thực thi ngay, chặn phân tích HTML tiếp theo |
| 7️⃣ | Kết thúc <head>, bắt đầu <body> |
Trình duyệt tiếp tục phân tích và dựng DOM |
| 8️⃣ | HTML trong <body> | Các phần tử HTML được tải và render tuần tự |
| 9️⃣ | <img>, <video>, <audio>... |
Các tài nguyên đa phương tiện được tải song song |
| 🔟 | <script> trong <body> (không có async/defer) |
Dừng phân tích DOM, tải & thực thi script |
| 1️⃣1️⃣ | <script defer> | Tải song song nhưng thực thi sau khi DOM hoàn tất |
| 1️⃣2️⃣ | <script async> | Tải song song và thực thi ngay khi tải xong, không đảm bảo thứ tự |
| 1️⃣3️⃣ | DOMContentLoaded | Khi toàn bộ HTML phân tích xong, không đợi ảnh hay video |
| 1️⃣4️⃣ | Load event | Khi toàn bộ trang (gồm ảnh, CSS, JS) đã tải xong |
🧠 Gợi ý tối ưu hóa tải trang
-
✅ Dùng
defercho script ở<head>để không chặn DOM. -
✅ Đặt JS cuối body nếu không dùng
defer. -
✅ Dùng
asynccho script độc lập (như Google Analytics). -
✅ Tối ưu CSS để tránh blocking render.
📌 Ví dụ đoạn HTML tối ưu:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Trang tối ưu</title> <link rel="stylesheet" href="styles.css"> <script src="main.js" defer></script></head><body> <h1>Xin chào</h1> <img src="image.jpg" alt="ảnh mẫu"></body></html>🎯 Mẹo nhớ nhanh:
CSS chặn render, JS chặn DOM (nếu không defer/async), ảnh tải song song, DOMContentLoaded không đợi ảnh.
[ Made by AI ] // Built with neural networks 🧠⚙️
Nhận xét
Đăng nhận xét