Nereye koydu < için en iyi yer;script> HTML etiketleri?

Bir HTML belgesinde JavaScript gömme ne zaman, nerede <script> etiketler ve dahil JavaScript koymak için en iyi yer Neresidir? Hatırlıyorum sen ne yeri bu <head> Bölüm, ama yerleştirme başında <body> Bölüm kötü, çok, çünkü JavaScript olmalı ayrıştırılmış önce sayfasıdır işlenmiş tamamen (ya da bir şey gibi). Bu terk gibi görünüyorsonunda<script> mantıklı bir yere etiketleri <body> Bölüm.

Yani, nereye<script> etiketleri koymak için en iyi yer?

(Bu başvurular hangi JavaScript işlevini çağırır <a> taşınması gereken önerildi this question etiketler <script> etiketleri için bir soru. Özellikle JQuery kullanıyorum, ama daha genel cevaplar da uygun.)

CEVAP

5 HAZİRAN 2014, PERŞEMBE

Sorular burada link yinelenen bir sürü beri, 5 yaşında değil bu bir cevap göndermenizi istiyorum.

Burada bir tarayıcı bir web sitesi yük olacağı budur:

HTML sayfası (örneğin index.html al
HTML ayrıştırmak
Çözümleyici <script> etiket dış komut bir dosya başvuran karşılaşır.
Tarayıcı istekleri komut dosyası. Bu arada, çözümleyici ve sayfanızdaki diğer HTML ayrıştırma durur.
Bir süre sonra komut indirilen ve daha sonra yürütülür.
Ayrıştırıcı HTML belgesi geri kalanını ayrıştırma devam ediyor.

Adım 4 kötü bir kullanıcı deneyimi neden olur. Web sitesi temel olarak, tüm komut dosyaları indirdikten kadar yükleme durur. Eğer kullanıcılar çok nefret ettikleri bir şey varsa yüklemek için bir web sitesi bekliyor.

Bu neden oluyor?

Herhangi bir komut dosyası document.write() veya diğer DOM manipülasyon yoluyla kendi HTML ekleyebilirsiniz. Bu ayrıştırıcı komut güvenle belgenin geri kalanını ayrıştırmak için önce indirilen ve idam edilene kadar beklemek zorunda anlamına gelir. Sonuçta, senaryoolabilirbelgenin kendi HTML eklenmiş.

Ancak, çoğu javascript geliştiriciler artık DOM işlemeksürebelge yükleniyor. Bunun yerine, belgeyi değiştirmeden önce yüklenen kadar bekleyin. Örneğin:

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script type="text/javascript" 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ı my-script.js indirilen ve idam edilene kadar belgeyi değiştirmek için gitmiyor bilmez, çünkü, ayrıştırıcı ayrıştırma durur.

Antika öneri

Bu sorunu çözmek için eski yaklaşım bu ayrıştırıcı sonuna kadar bloke değil sağlar çünkü alt <body>, <script> etiketleri koymak oldu.

Bu yaklaşım kendi sorunu var: tarayıcı başlatılamıyor tüm belge ayrıştırılır. kadar komut dosyaları indirme Büyük komut ve stil ile büyük web siteleri için, senaryoyu en kısa sürede indirmek için mümkün olan performans için çok önemlidir. Eğer web siteniz 2 saniye içinde yük değilse, başka bir web sitesine gidin.

En iyi çözüm, tarayıcı aynı anda belgenin geri kalanı ayrıştırılırken en kısa sürede size komut dosyaları indirme başlayacak.

Modern yaklaşım

Bugün, tarayıcılar async destek defer komut öznitelikleri. Bu öznitelikler güvenli komut dosyaları karşıdan yüklenirken ayrıştırma devam etmek için tarayıcı söyler.

zaman uyumsuz

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

Zaman uyumsuz özniteliği ile komut dosyaları zaman uyumsuz olarak yürütülür. Bu script indirilen en kısa sürede, bu arada tarayıcı engelleme olmadan yürütülen anlamına gelir.
Bu olası senaryo anlamına gelir 2 indirilen & senaryo 1 önce yürütülür.

Tüm tarayıcılar http://caniuse.com/#search=async �'e göre destek bu.

erteleme

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

Öznitelik erteleme ile komut sırayla (yani birinci senaryo 1, senaryo 2) yürütülür. Bu da tarayıcı engellemez.

Zaman uyumsuz komut aksine, erteleme yalnızca komut dosyaları belgenin tamamını yüklendikten sonra çalıştırılır.

Tüm tarayıcılar http://caniuse.com/#search=defer �'e göre destek bu. 88'i en azından kısmen destekliyor.

Tarayıcı uyumluluğu önemli bir not: bazı durumlarda IE <= 9 ertelenmiş komut dosyalarını çalıştırmak arızalı olabilir. Eğer bu tarayıcıları desteklemek isterseniz, lütfen this ilk okuyun!

Sonuç

Mevcut state-of-the-art <head> etiketinde komut koymak ve async defer öznitelikleri kullanın. Bu komut asap tarayıcınızın engelleme olmadan indirilmesine olanak veriyor.

İyi bir şey web sitenizin hala doğru diğer � hızlandırmak iken, bu nitelikleri desteği olmayan tarayıcılar 'si üzerinde yük olmasıdır.

Bunu Paylaş: