Khi nhúng file JavaScript vào HTML, ngoài cách viết truyền thống, bạn còn có thể dùng thêm hai thuộc tính cực kỳ có ích về hiệu năng: async và defer.
Nhưng… tụi này khác gì nhau? Khi nào nên xài cái nào?
Đọc bài này xong là bạn nhớ đời luôn.
💡 Vấn đề: HTML và JS ai chờ ai?
<html> <head> ... </head> <body> ... <script src="script.js"> ....
</body> </html> Khi trình duyệt đọc file HTML từ trên xuống:
- Nếu thấy
<script>thông thường → nó sẽ dừng lại, tải và chạy file JS đó rồi mới tiếp tục đọc HTML tiếp theo. - Điều này làm trang web tải chậm, nhất là khi script ở phần
<head>.
⚔️ Giới thiệu nhân vật chính
1. async – Ai nhanh người nấy chạy
<script src="main.js" async></script>
- JS được tải song song với HTML
- Ngay khi tải xong → chạy script liền! (không cần chờ HTML parsing hoàn tất)
- ❌ Không đảm bảo thứ tự nếu có nhiều script async
📌 Dùng cho script ngoại vi, không phụ thuộc DOM, ví dụ: Google Analytics, ads…
2. defer – Cứ từ từ, DOM xong rồi tính
<script src="main.js" defer></script>
- JS được tải song song với HTML
- Nhưng chờ DOM xây xong rồi mới chạy JS (ngay thời điểm
DOMContentLoaded) - ✅ Đảm bảo chạy đúng thứ tự các script defer nếu có nhiều cái
📌 Dùng cho hầu hết các file script chính của web, vì nó an toàn, tránh lỗi DOM chưa có mà JS đã chạy.
3. Không dùng gì cả (thô sơ kiểu cũ)
<script src="main.js"></script>
- HTML parsing bị tạm ngưng cho đến khi tải + chạy xong JS
- 👉 Trừ khi đặt ở cuối file HTML, thì tránh dùng cách này.
📊 Bảng so sánh async vs defer
| Thuộc tính | Tải song song | Chờ DOM xong mới chạy | Giữ thứ tự script | Gợi ý dùng cho |
|---|---|---|---|---|
| async | ✅ | ❌ | ❌ | Script độc lập |
| defer | ✅ | ✅ | ✅ | Script chính |
| (none) | ❌ | ❌ | ✅ (vì chờ luôn) | Cuối HTML thôi |
🏁 Vị trí đặt <script> – Có quan trọng không?
- Trong
<head>: Bắt buộc dùngasynchoặcdeferđể tránh block page - Cuối body (
</body>): Có thể dùng script kiểu truyền thống nếu DOM đã xong
🧠 Best practice:
Đặt toàn bộ
<script>ở<head>và dùngdeferđể tách logic rõ ràng và cải thiện hiệu năng.
🧪 Demo DOMContentLoaded là gì?
DOMContentLoaded là thời điểm mà trình duyệt đã phân tích xong HTML và sẵn sàng cho JS thao tác với DOM.
document.addEventListener("DOMContentLoaded", () => { console.log("DOM is ready!");});
Khi bạn dùng defer, script sẽ chạy chính xác ngay lúc này.
🎯 Kết luận
- Dùng
defercho JS chính của app: an toàn, thứ tự đúng, đỡ lỗi. - Dùng
asynccho script độc lập như tracking. - Tránh nhúng
<script>kiểu cũ ở<head>nếu không muốn chậm web. - Biết cách kết hợp sẽ giúp web tải nhanh hơn và mượt hơn 🚀
Bài viết có tham khảo: https://dev.to/fidalmathew/async-vs-defer-in-javascript-which-is-better-26gm