defer dan async mengubah bila skrip luaran <script> memuat turun dan melaksana berbanding dengan penghuraian HTML. Kedua-duanya membenarkan skrip memuat turun selari tanpa menyekat penghurai — perbezaannya ialah masa pelaksanaan.
html
defer dan async mengubah bila skrip luaran <script> memuat turun dan melaksana berbanding dengan penghuraian HTML. Kedua-duanya membenarkan skrip memuat turun selari tanpa menyekat penghurai — perbezaannya ialah masa pelaksanaan.
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 | |
|---|---|---|
| Muat turun | selari | selari |
| Laksana | sebaik sahaja dimuat turun | selepas HTML dihuraikan sepenuhnya |
| Tertib dipelihara? | Tidak (sesiapa yang selesai lebih awal) | Ya (tertib dokumen) |
| Sekat penghurai? | hanya ringkas semasa exec | tidak pernah |
defer — untuk skrip yang menyentuh DOM atau bergantung antara satu sama lain/tertib (kod apl anda). Ia dilaksana selepas DOM wujud, secara berurutan, sejurus sebelum DOMContentLoaded.async — untuk skrip pihak ketiga bebas yang tidak bergantung pada DOM atau skrip lain (analitik, iklan). Tertib tidak penting, laksanakan mereka secepatnya.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Nota: kedua-duanya hanya terpakai pada skrip luaran (src); ia diabaikan pada skrip sebaris. Modul ES (type="module") ditangguhkan secara lalai.
Menggunakan defer/async menghalang skrip daripada menyekat penghuraian HTML, yang secara langsung meningkatkan prestasi beban dan First Contentful Paint.
Memilih yang betul (defer untuk kod apl tertib bergantung DOM, async untuk skrip pihak ketiga api-dan-lupa) mengelakkan beban perlahan dan pepijat bergantung-tertib.