Bir tarayıcı <script>üzerinde etiketi olan bir web sitesi yüklediğinde şunlar olur :
- HTML sayfasını getirin (örn. İndex.html)
- HTML'yi ayrıştırmaya başlayın
- Ayrıştırıcı
<script>, harici bir komut dosyasına başvuran bir etiketle karşılaşır .
- Tarayıcı kod dosyasını ister. Bu arada, ayrıştırıcı, sayfanızdaki diğer HTML'yi ayrıştırmayı engeller ve durdurur.
- Bir süre sonra komut dosyası indirilir ve daha sonra 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 oluyor. Web siteniz temel olarak tüm komut dosyalarını indirinceye kadar yüklemeyi durdurur. Kullanıcıların nefret ettiği bir şey varsa, bir web sitesinin yüklenmesini bekler.
Bu neden oluyor?
Herhangi bir komut dosyası kendi HTML'sini document.write()veya diğer DOM manipülasyonları aracılığıyla ekleyebilir . Bu, ayrıştırıcının belgenin geri kalanını güvenle ayrıştırmadan önce komut dosyasının indirilip yürütülmesini beklemesi gerektiği anlamına gelir. Sonuçta, senaryo olabilir belgede kendi HTML taktınız.
Ancak, çoğu JavaScript geliştiriciler artık DOM işlemek iken belge yükleme olduğunu. Bunun yerine, belgeyi değiştirmeden önce yüklenmesini beklerler. Ö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() {
// this function runs when the DOM is ready, i.e. when the document has been parsed
document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});
Tarayıcınız my-script.js dosyasını indirilinceye ve yürütülene kadar belgede değişiklik yapmayacağını bilmediğinden, ayrıştırıcı ayrıştırmayı durdurur.
Antika öneri
Bu sorunu çözmenin eski yaklaşımı <script>etiketleri etiketinizin altına yerleştirmekti <body>, çünkü bu ayrıştırıcının sonuna kadar engellenmemesini sağlar.
Bu yaklaşımın kendi sorunu vardır: belgenin tamamı ayrıştırılıncaya kadar tarayıcı komut dosyalarını indirmeye başlayamaz. Büyük komut dosyaları ve stil sayfaları olan daha büyük web siteleri için, komut dosyasını en kısa zamanda indirebilmek performans için çok önemlidir. Web siteniz 2 saniye içinde yüklenmezse kullanıcılar başka bir web sitesine gider.
Optimal bir çözümde, tarayıcı komut dosyalarınızı mümkün olan en kısa sürede indirmeye başlar ve aynı zamanda belgenizin geri kalanını ayrıştırır.
Modern yaklaşım
Bugün, tarayıcılar komut dosyalarındaki asyncve deferözelliklerini destekler . Bu özellikler, tarayıcıya komut dosyaları indirilirken ayrıştırmaya devam etmenin güvenli olduğunu söyler.
zaman uyumsuz
<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>
Eşzamansız özniteliğe sahip komut dosyaları eşzamansız olarak yürütülür. Bu, komut dosyasının indirilir indirilmez, bu arada tarayıcıyı engellemeden yürütüldüğü anlamına gelir.
Bu, komut dosyası 2'nin komut dosyası 1'den önce indirilip çalıştırılabileceğini gösterir.
Http://caniuse.com/#feat=script-async'e göre , tüm tarayıcıların% 97,78'i bunu desteklemektedir.
erteleme
<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 (örn. Önce komut dosyası 1, sonra komut dosyası 2). Bu ayrıca 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'sı en azından kısmen destekliyor.
Tarayıcı uyumluluğu hakkında önemli bir not: bazı durumlarda IE <= 9, ertelenmiş komut dosyalarını bozuk çalıştırabilir. Bu tarayıcıları desteklemeniz gerekiyorsa, lütfen önce bunu okuyun !
Sonuç
Tekniğin bilinen durumu, <head>etikete komut dosyaları koymak ve asyncveya deferözniteliklerini kullanmaktır . Bu, komut dosyalarınızın tarayıcınızı engellemeden en kısa sürede indirilmesini sağlar.
İyi olan şey, web sitenizin diğer özellikleri% 98'i hızlandırırken bu özellikleri desteklemeyen tarayıcıların% 2'sine doğru bir şekilde yüklenmesidir.