defer ve async Farkı

JavaScript'te, sayfa yükleme süresini optimize etmek ve performansı artırmak amacıyla kullanılan iki önemli özellik olan defer ve async, script etiketleri üzerinde kullanılmaktadır. Bu iki özellik, tarayıcının JavaScript dosyalarını nasıl yükleyip çalıştıracağını etkiler ve aralarındaki farklar, sayfa performansı üzerinde önemli etkilere yol açabilir.

Defer özelliği, script’in sayfa yüklendikten sonra çalıştırılmasını sağlar. Bu özellik kullanıldığında, script dosyası sayfanın geri kalan içeriği ile birlikte yüklenir, fakat çalıştırılması, DOM’un tamamen yüklendiği ana kadar bekletilir. Bu, kullanıcı deneyimini iyileştirir çünkü sayfanın içeriği daha hızlı bir şekilde görüntülenir. Örneğin:



Bu durumda, script.js dosyası, sayfa yüklendikten sonra çalıştırılır. Eğer birden fazla defer ile işaretlenmiş script varsa, bunlar sıralı bir şekilde çalıştırılır.

Öte yandan, async özelliği, script dosyalarının yüklenmesini ve çalıştırılmasını asenkron hale getirir. Yani, script dosyası sayfa yüklemesiyle paralel olarak yüklenir ve yüklenmesi tamamlandığında hemen çalıştırılır. Bu, sayfanın yüklenme süresini hızlandırabilir ama script’lerin çalışma sırası garanti edilmez. Örnek kullanım:



Burada, script.js dosyası yüklendiğinde hemen çalıştırılır, ancak sayfanın diğer elementleri yüklendikten sonra çalışıp çalışmayacağı kesin değildir.

Sonuç olarak, defer ve async kullanımı, JavaScript dosyalarının yüklenme ve çalışma şekilleri açısından önemli farklılıklar taşır. defer, sayfa yüklemesi tamamlandıktan sonra script’in çalışmasını sağlarken, async ise script’in hemen çalışmasını sağlar. Bu özelliklerin doğru anlaşılması ve kullanılması, web sayfalarının performansını ve kullanıcı deneyimini doğrudan etkileyebilir.