| Özellik | Runtime | onreadystatechange | DOMContentLoaded | onload | rAF |
|---|---|---|---|---|---|
| Inline/Src | loading | interactive/complete | interactive | complete | complete |
| Async | interactive | complete | - | complete | interactive / complete (yavaş bağlantı) |
| Defer | interactive | complete | interactive | complete | complete |
| Dinamik Ekleme (src/async/defer) | interactive | complete | - | complete | interactive / complete (yavaş bağlantı) |
| Inline | interactive | - | interactive | complete | complete |
Async Script:
<script async src="async-script.js"></script>- Tarayıcı, HTML'yi ayrıştırırken aynı zamanda betik dosyasını da yükler.
- Betik dosyası hazır olur olmasının hemen ardından yürütülür.
- Diğer DOM işlemleri devam ederken betik de yürütülebilir.
- Betiklerin yürütülme sırası garanti edilmez.
Defer Script:
<script defer src="defer-script.js"></script>- Tarayıcı, HTML'yi ayrıştırırken aynı zamanda betik dosyasını da yükler.
- Betik dosyası, HTML ayrıştırma işlemi tamamlandıktan sonra yürütülür.
- Betiklerin yürütülme sırası HTML sırasına göre garanti edilir.
- DOMContentLoaded olayından önce betikler yürütülür.
Async vs Defer:
- Async, betiklerin mümkün olan en kısa sürede yürütülmesini sağlar. Ancak sıraları garanti edilmez.
- Defer, betiklerin HTML ayrıştırması tamamlandıktan sonra sıralı olarak yürütülmesini sağlar.
- Async betikler, DOM hazır olmadan da yürütülebilir. Defer betikler ise DOM hazır olmadan yürütülmez.
- Async betikler birbirinden bağımsız olarak yürütülür, defer betikler ise HTML sırasına göre yürütülür.
