JavaScript’i bir HTML belgesine yerleştirirken, <script> etiketlerini koymanın en uygun yeri neresidir?

Bir tarayıcı <script> etiketi bulunan bir web sitesini yüklediğinde şunlar olur :

HTML sayfasını getirir (örn. index.html)
HTML’yi ayrıştırmaya başlar
Ayrıştırıcı harici bir dosyaya başvuran bir <script> etiketiyle karşılaşır .
Tarayıcı script dosyasını ister. Bu sırada ayrıştırıcı sayfanızdaki diğer HTML’yi ayrıştırmayı engeller ve durdurur.
Bir süre sonra komut dosyası indirilir ve ardından yürütülür.
Ayrıştırıcı HTML belgesinin geri kalanını ayrıştırmaya devam eder.

4. Adım, kötü bir kullanıcı deneyimine neden olur. Web siteniz, tüm komut dosyalarını indirene kadar temel olarak yüklenmeyi durdurur. Kullanıcıların nefret ettiği bir şey varsa, o da bir web sitesinin yüklenmesini beklemektir.

Bu neden oluyor?

Herhangi bir komut dosyası document.write() aracılığıyla kendi HTML’sini veya diğer DOM öğelerini ekleyebilir. Bu, ayrıştırıcının belgenin geri kalanını güvenli bir şekilde ayrıştırmadan önce komut dosyası indirilip çalıştırılana kadar beklemesi gerektiği anlamına gelir. Sonuçta, komut dosyası belgeye kendi HTML’sini eklemiş olabilir.

Ancak, çoğu JavaScript geliştiricisi artık belge yüklenirken DOM üzerinde işleme yapmıyor. Bunun yerine, değişiklik yapmadan önce belgenin yüklenmesini bekliyorlar. Örneğin:

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>

Javascript:

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // bu fonksiyon dom hazır olunca calısır - dokuman hazır olunca
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

Eski öneri

Bu sorunu çözmeye yönelik eski yaklaşım, <script>‘i <body> etiketinin altına koymaktı, çünkü bu, ayrıştırıcının sonuna kadar engellenmemesini sağlar.

Ancak, bu yaklaşımın da kendine özgü sorunları var: tarayıcı, tüm belge ayrıştırılana kadar komut dosyalarını indirmeye başlayamaz. Büyük komut dosyaları ve stil sayfalarına sahip daha büyük web siteleri için komut dosyasını mümkün olan en kısa sürede indirebilmek performans için çok önemlidir. Web siteniz 2 saniye içinde yüklenmezse, insanlar başka bir web sitesine gidecektir.

Optimal bir çözümde, tarayıcı, belgenizin geri kalanını ayrıştırırken aynı zamanda komut dosyalarınızı mümkün olan en kısa sürede indirmeye başlayacaktır.

modern yaklaşım

Günümüzde tarayıcılar betiklerdeki async and defer özniteliklerini destekler. Bu öznitelikler, tarayıcıya, komut dosyaları indirilirken ayrıştırmaya devam etmenin güvenli olduğunu söyler.

zaman uyumsuz – async

<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>

async özniteliğine sahip komut dosyaları, zaman uyumsuz olarak yürütülür. Bu, betiğin indirildiğinde çalıştırılmasını söyler – bu sırada da tarayıcıyı engellenmeden yürütme işlemine devam eder. Bu aynı zamanda, komut dosyası 2’nin komut dosyası 1’den önce indirilip yürütülmesinin de mümkün olduğu anlamına gelir.

http://caniuse.com/#feat=script-async’e göre , tüm tarayıcıların %97,78’i bunu destekler.

ertele – defer

<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>

erteleme özniteliğine sahip komut dosyaları sırayla yürütülür (yani önce komut dosyası 1, ardından komut dosyası 2). Bu da tarayıcıyı engellemez.

Zaman uyumsuz komut dosyalarının aksine, erteleme komut dosyaları yalnızca tüm belge yüklendikten sonra yürütülür.

http://caniuse.com/#feat=script-defer’e göre , tüm tarayıcıların %97,79’u bunu desteklemektedir. %98.06 en azından kısmen destekliyor.

Tarayıcı uyumluluğu hakkında önemli bir not: bazı durumlarda IE <= 9, ertelenmiş komut dosyalarını düzensiz çalıştırabilir. Bu tarayıcıları desteklemeniz gerekiyorsa, lütfen önce bunu okuyun !

(Daha fazla bilgi edinmek ve zaman uyumsuz, erteleme ve normal komut dosyaları arasındaki farkların gerçekten yararlı görsel temsillerini görmek için referanslar bölümündeki ilk 2 bağlantıyı kontrol edin)

Çözüm

Şu anki son teknoloji, komut dosyalarını <head> etiketi altına koymak ve async veya defer niteliklerini kullanmaktır. Bu, komut dosyalarınızın tarayıcınızı engellemeden en kısa sürede indirilmesini sağlar.

İşin iyi yanı, web sitenizin bu özellikleri desteklemeyen tarayıcıların %2’sinde doğru şekilde yüklenmesi ve diğer %98’inde ise hızlı çalışmasıdır.

Referanslar

html javascript

script etiketlerini HTML’de nereye koymalıyız?