Menu

So sánh Async và Defer trong Javascript

async và defer đều giúp tải script không chặn render HTML, nhưng khác nhau ở thời điểm thực thi: async tải và chạy ngay lập tức khi hoàn thành (không theo thứ tự), lý tưởng cho script độc lập; trong khi defer tải song song nhưng chờ HTML phân tích xong mới chạy theo thứ tự, phù hợp cho các script chính cần tương tác với DOM. 

So sánh chi tiết async và defer

Tính năng async (Asynchronous)defer (Deferred)
TảiSong song với HTML parsing (không chặn).Song song với HTML parsing (không chặn).
Thực thiNgay khi tải xong, có thể chặn HTML parsing tạm thời.Sau khi HTML parsing hoàn tất (trước sự kiện DOMContentLoaded).
Thứ tựKhông đảm bảo thứ tự thực thi giữa các script.Đảm bảo thứ tự thực thi theo vị trí trong HTML.
Trường hợp dùngScript độc lập, không phụ thuộc DOM/script khác (VD: Google Analytics, quảng cáo).Script chính cần DOM, phụ thuộc lẫn nhau (VD: script tương tác trang, thư viện UI).

Tóm tắt cách hoạt động

  • <script async src="script.js"></script>: Trình duyệt tải script.js song song, khi tải xong thì dừng parse HTML, thực thi script ngay, rồi mới tiếp tục parse HTML.
  • <script defer src="script.js"></script>: Trình duyệt tải script.js song song, chờ parse HTML xong hết, sau đó mới thực thi script.js.
  • <script src="script.js"></script> (mặc định): Dừng parse HTML, tải và thực thi script, sau đó mới tiếp tục parse HTML (giống chặn).
Xem thêm   Phân biệt null, undefined và NaN trong Javascript

Lời khuyên khi sử dụng

  • Dùng async cho các script nhỏ, độc lập, không cần biết thứ tự hoặc tương tác DOM.
  • Dùng defer cho hầu hết các script chính của bạn, đảm bảo an toàn và đúng thứ tự.
  • Nếu không dùng cả hai, đặt script ở cuối <body> (trước </body>) để tránh chặn render. 

/ Google AI

Related Posts