Async và Defer: Chiến lược tải script nào phù hợp cho website của bạn?
Published on: October 09, 2024
Last updated: October 26, 2025 Xem trên toàn màn hình
Last updated: October 26, 2025 Xem trên toàn màn hình
Recommended for you
- 07 Jan 2025
Phân biệt Proxy, HMA và VPN 14/269 - 09 Aug 2023 "Loop unrolling" là gì? 6/125
- 15 Aug 2025 Dự án phần mềm bị trì hoãn và vấn đề "akrasia" 6/37
- 01 Apr 2025 CTO ra quyết định như thế nào? 5/32
- 11 Mar 2025 Thiên hướng Hành động (Bias for Action) và Thiên hướng Quy trình (Bias for Process) tác động tiêu cực tới "đổi mới và sáng tạo" như thế nào? 5/60
- 29 Aug 2023 "Function inlining" là gì? 3/61
- 16 Apr 2025 Lãnh đạo linh hoạt: Hành động (Bias for Action) hay không hành động (Non-Action)? 3/37
- 01 May 2022 Có thể xác định vị trí địa lý của địa chỉ IP với độ chính xác đến từng địa chỉ con phố? 3/472
- 04 Sep 2023 Giải mã nhóm tính cách (ISTP - Nhà kỹ thuật) 2/246
- 10 Aug 2020 Bạn có biết quy tắc thất bại nhanh: Fail early, fail often, fail cheap, but always fail forward 1/112
Các lập trình viên thường lúng túng và nhầm lẫn giữa hai thuộc tính async và defer. Cả hai đều là một trong những chủ đề quan trọng khi tối ưu hiệu suất tải JavaScript trên website.
Hai thuộc tính async và defer đều dùng cho <script> nhưng chúng hoạt động khác nhau về thời điểm tải và thực thi, ảnh hưởng trực tiếp đến tốc độ hiển thị (render) của trang.
Không có async hoặc defer
<script imagesource="main.js"></script> 👉 Khi trình duyệt gặp dòng này:
- Nó tạm dừng việc tải và render HTML,
- Sau đó tải file JS,
- Rồi thực thi JS ngay lập tức,
- Cuối cùng mới tiếp tục render phần HTML còn lại.
→ Đây là cách cũ, khiến trang bị “chặn render” (render-blocking), làm chậm hiển thị nội dung đầu trang.
Trình duyệt bắt đầu parse HTML
|----------------------------------------------------------> thời gian
1️⃣ Không có async/defer (blocking)
HTML parse → script tải → script thực thi → tiếp tục parse HTML
HTML: ...
Script: ...
Timeline:
[Parse HTML]----[Load JS]----[Execute JS]----[Continue HTML parsing]
✔ Chặn render → trang tải chậm nếu JS lớn
async – Tải song song, thực thi ngay khi xong
<script imagesource="main.js" async></script>
🟢Cách hoạt động:
- File JS được tải song song với HTML (không chặn tải).
- Ngay khi tải xong, nó sẽ tạm dừng render HTML để thực thi JS ngay lập tức.
- Sau khi xong, trình duyệt tiếp tục render HTML còn lại.
📈 Ưu điểm:
-
Rất nhanh cho các script độc lập (ví dụ: Google Analytics, quảng cáo, tracking).
⚠️ Nhược điểm:
-
Không đảm bảo thứ tự giữa các script.
Nếu có nhiều script async, script nào tải xong trước sẽ chạy trước — dễ lỗi nếu script phụ thuộc lẫn nhau.
2️⃣ async (tải song song, thực thi ngay khi xong)
HTML parse ↔ script tải song song
Script thực thi ngay khi tải xong → tạm dừng HTML parsing
Timeline:
HTML Parsing: [Parse HTML]-------------------------------
JS Loading : [Load JS async]---------------------------
JS Execute : [Execute JS]
HTML Continue: [Continue HTML parsing]
✔ Tốc độ tải tốt
❌ Thứ tự script không được đảm bảo
defer – Tải song song, thực thi sau khi HTML tải xong
<script imagesource="main.js" defer></script>
🟢 Cách hoạt động:
- File JS cũng được tải song song với HTML.
- Nhưng khác với
async: script chỉ chạy sau khi toàn bộ HTML được tải và phân tích xong. - Các script có
deferđược thực thi theo đúng thứ tự xuất hiện trong HTML.
📈 Ưu điểm:
- Không chặn render (tăng tốc hiển thị).
- Đảm bảo thứ tự chạy giữa các script.
- Thích hợp cho các thư viện chính hoặc app.js phụ thuộc vào DOM.
3️⃣ defer (tải song song, thực thi sau khi HTML parse xong)
HTML parse ↔ script tải song song
Script chỉ thực thi sau khi HTML parse xong, giữ đúng thứ tự
Timeline:
HTML Parsing: [Parse HTML]-------------------------------
JS Loading : [Load JS defer]---------------------------
JS Execute : [Execute JS in order]
✔ Tốc độ tải tốt
✔ Thứ tự script đảm bảo
So sánh nhanh
| Thuộc tính | Tải song song? | Chặn render? | Khi nào thực thi? | Giữ thứ tự? | Phù hợp cho |
|---|---|---|---|---|---|
| (Không có) | ❌ Không | ✅ Có | Ngay khi gặp script | ✅ Có | Script cần chạy sớm (rất hiếm khi cần) |
async |
✅ Có | ❌ Không | Ngay khi tải xong | ❌ Không | Script độc lập (analytics, ads, tracking) |
defer |
✅ Có | ❌ Không | Sau khi HTML tải xong | ✅ Có | Script chính, app logic, UI, plugin DOM |
Lời khuyên (best practice)
-
async: cho script ngoài lề, không phụ thuộc DOM hoặc script khác.
→ Ví dụ:lazyLoadScript('https://www.googletagmanager.com/gtag/js?id=UA-XXXX', 0, { async: true }); -
defer: cho script chính của website hoặc plugin cần DOM.
→ Ví dụ:lazyLoadScript('/js/app.js', 0, { defer: true });
🔑 3 điểm cần nhớ
- No attr: chặn HTML parsing, script chạy ngay → làm chậm render
- Async: tải song song, chạy ngay khi xong → nhanh nhưng thứ tự không đảm bảo
- Defer: tải song song, chạy sau khi parse xong → nhanh và giữ thứ tự script
[{"displaySettingInfo":"[{\"isFullLayout\":false,\"layoutWidthRatio\":\"\",\"showBlogMetadata\":true,\"showAds\":true,\"showQuickNoticeBar\":true,\"includeSuggestedAndRelatedBlogs\":true,\"enableLazyLoad\":true,\"quoteStyle\":\"1\",\"bigHeadingFontStyle\":\"1\",\"postPictureFrameStyle\":\"2\",\"isFaqLayout\":false,\"isIncludedCaption\":false,\"faqLayoutTheme\":\"1\",\"isSliderLayout\":false}]"},{"articleSourceInfo":"[{\"sourceName\":\"\",\"sourceValue\":\"\"}]"},{"privacyInfo":"[{\"isOutsideVietnam\":false}]"},{"tocInfo":"[{\"isEnabledTOC\":true,\"isAutoNumbering\":false,\"isShowKeyHeadingWithIcon\":false}]"},{"bannerInfo":"[{\"isBannerBrightnessAdjust\":false,\"bannerBrightnessLevel\":\"\",\"isRandomBannerDisplay\":true}]"},{"termSettingInfo":"[{\"showTermsOnPage\":true,\"displaySequentialTermNumber\":true}]"}]
Nguồn
{content}
Khám phá thêm các chủ đề sau
Đọc thêm: Hướng dẫn hợp tác viết bài (guest blogging)
Các chủ đề được quan tâm nhiều nhất
CHIA SẺ BÀI VIẾT
Link copied!
Mới cập nhật