defer dan async mengubah kapan <script> eksternal diunduh dan dieksekusi relatif terhadap penguraian HTML. Keduanya memungkinkan skrip untuk diunduh secara paralel tanpa memblokir pengurai — perbedaannya adalah waktu eksekusi.
html
defer dan async mengubah kapan <script> eksternal diunduh dan dieksekusi relatif terhadap penguraian HTML. Keduanya memungkinkan skrip untuk diunduh secara paralel tanpa memblokir pengurai — perbedaannya adalah waktu eksekusi.
Normal: parse──stop──[download+exec]──parse──────── (slowest)
async: parse──────────────────exec──parse──────── (runs whenever it arrives)
defer: parse───────────────────────────parse──exec (after parsing, before DOMContentLoaded)
async | defer | |
|---|---|---|
| Unduhan | paralel | paralel |
| Dieksekusi | segera setelah diunduh | setelah HTML sepenuhnya diurai |
| Urutan dipertahankan? | Tidak (siapa pun yang selesai terlebih dahulu) | Ya (urutan dokumen) |
| Memblokir pengurai? | hanya sebentar saat eksekusi | tidak pernah |
defer — untuk skrip yang menyentuh DOM atau bergantung satu sama lain/urutan (kode aplikasi Anda). Mereka berjalan setelah DOM ada, berturut-turut, tepat sebelum DOMContentLoaded.async — untuk skrip pihak ketiga independen yang tidak bergantung pada DOM atau skrip lain (analitik, iklan). Urutan tidak penting, jalankan sedini mungkin.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Catatan: keduanya hanya berlaku untuk skrip eksternal (src); mereka diabaikan pada skrip inline. Modul ES (type="module") ditangguhkan secara default.
Menggunakan defer/async mencegah skrip memblokir penguraian HTML, yang secara langsung meningkatkan kinerja pemuatan dan First Contentful Paint.
Memilih yang tepat (defer untuk kode aplikasi yang terurut dan bergantung pada DOM, async untuk skrip pihak ketiga yang tidak bergantung) menghindari pemuatan lambat dan bug ketergantungan urutan.