Tại sao việc sử dụng thẻ

Question

Tại sao việc sử dụng thẻ <script> với thuộc tính 'defer' và 'async' lại tạo ra sự khác biệt lớn trong việc tối ưu hóa Critical Rendering Path, và khi nào nên ưu tiên sử dụng 'defer' thay vì 'async' trong các ứng dụng Enterprise?

Accepted Answer

Phân tích cơ chế

async: Script được tải song song với việc phân tích HTML và thực thi ngay khi tải xong. Quá trình phân tích HTML sẽ bị tạm dừng để thực thi script. Điều này gây rủi ro nếu script phụ thuộc vào DOM hoặc các script khác.
defer: Script được tải song song nhưng chỉ thực thi sau khi toàn bộ tài liệu HTML đã được phân tích xong. Các script defer sẽ thực thi theo đúng thứ tự xuất hiện trong file HTML.

Khi nào sử dụng 'defer' trong Enterprise?
Trong các ứng dụng Enterprise phức tạp, các thư viện thường có sự phụ thuộc lẫn nhau (ví dụ: thư viện UI phụ thuộc vào core framework). Việc dùng defer đảm bảo:

Tính ổn định: DOM đã sẵn sàng hoàn toàn khi script chạy.
Thứ tự thực thi: Đảm bảo các module được load đúng trình tự, tránh lỗi undefined hoặc ReferenceError.
Hiệu năng: Không chặn quá trình xây dựng DOM (DOM construction), giúp cải thiện chỉ số First Contentful Paint (FCP).

Lời khuyên: Luôn ưu tiên defer cho các script ứng dụng chính và chỉ sử dụng async cho các script độc lập như Google Analytics hoặc quảng cáo.

Tại sao việc sử dụng thẻ <script> với thuộc tính 'defer' và 'async' lại tạo ra sự khác biệt lớn trong việc tối ưu hóa Critical Rendering Path, và khi nào nên ưu tiên sử dụng 'defer' thay vì 'async' trong các ứng dụng Enterprise?

Phân tích cơ chế

Khi nào sử dụng 'defer' trong Enterprise?

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi html liên quan cùng chủ đề