Artıları ve Eksileri Nelerdir: Javascript'i başa koymak ve vücudun kapanmasının hemen önüne koymak


87

Javascript ve web geliştirme kitaplarının / makalelerinin çoğu, CSS'yi başlık etiketine ve javascript sayfanın alt kısmına koymanız gerektiğini söylüyor.

Ancak bu tek yığın akışı gibi ünlü web sitelerinin html kaynağını açtığımda, baş etiketine bazı js dosyaları koyduklarını görüyorum.

Her iki yaklaşımın Artıları ve Eksileri nelerdir ve hangisi ne zaman kullanılır?

Aynı sorun için başka bir soru buldum: Sayfamda kullanılan JavaScript dosyalarını nerede ilan etmeliyim? <head> </head> içinde mi yoksa </body> yakınında mı?



Yanıtlar:


63

Yahoo'nun Web Sitenizi Hızlandırmaya Yönelik En İyi Uygulamalarından :

Komut dosyalarının neden olduğu sorun, paralel indirmeleri engellemeleridir. HTTP / 1.1 spesifikasyonu, tarayıcıların ana bilgisayar adı başına paralel olarak ikiden fazla bileşeni indirmemesini önerir. Görüntülerinizi birden çok ana bilgisayar adından sunuyorsanız, paralel olarak ikiden fazla indirme işlemi gerçekleştirebilirsiniz. Ancak bir komut dosyası indirilirken, tarayıcı farklı ana bilgisayar adlarında bile başka herhangi bir indirme işlemi başlatmaz.

Bazı durumlarda, komut dosyalarını en alta taşımak kolay değildir. Örneğin komut dosyası, sayfanın içeriğinin bir kısmını eklemek için document.write kullanıyorsa, sayfanın altına taşınamaz. Kapsam belirleme sorunları da olabilir. Çoğu durumda, bu durumları çözmenin yolları vardır.

Sıklıkla ortaya çıkan alternatif bir öneri, ertelenmiş komut dosyalarını kullanmaktır. ERTELEME özniteliği, komut dosyasının document.write içermediğini ve tarayıcıların işlemeye devam edebileceklerine dair bir ipucudur. Ne yazık ki, Firefox ERTELEME özelliğini desteklemiyor. Internet Explorer'da komut dosyası ertelenebilir, ancak istenildiği kadar değil. Bir komut dosyası ertelenebiliyorsa, sayfanın altına da taşınabilir. Bu, web sayfalarınızın daha hızlı yüklenmesini sağlayacaktır.

Bu nedenle, genel olarak bunların en alta yerleştirilmesi tercih edilir. Ancak, bu her zaman mümkün değildir ve çoğu zaman zaten bu kadar büyük bir fark yaratmaz .


Bir tuval üzerinde bir kareyi hareket ettiren bir örneğim var ve javascript'i HTML'nin baş kısmına koyarsam çalışmaz. Tuval ilan edildikten sonra gövdenin alt kısmında olmalıdır. Bunun bir nedeni var mı veya tüm Javascript'imi dosyanın <head> bölümünde nasıl saklayabilirim?
Doug Hauf

@DougHauf Bu konuda doğru olup olmadığımdan emin değilim ama DOMContentLoaded dinleyicisi eklediniz mi? Soruyorum, çünkü senaryonuz altta varsa ve tuvale iyi işliyor; Bunun nedeni, siz yazmaya çalışmadan önce tuvalin ekrana zaten yüklenmiş olmasıdır. Şimdi, komut dosyasını başlığa koyarsanız, tuval henüz orada olmadığı için tuvale çizilmez. Dolayısıyla, dinleyiciyi eklerseniz, tuval yüklendikten SONRA tuval kodunuzu ateşleyecektir.
Matthew D Auld

1
Alıntı yaptığınız belgenin kaç eski olduğunu bilmiyorum, ancak erteleme özniteliğinin bir süredir Firefox'ta desteklendiği görülüyor .
user2428118

Teşekkür ederim, bu bana çok yardımcı oluyor
tonydeleon

31

Başkalarının dediği gibi, javascript'i başa koyduğunuzda, sayfanın oluşturulmasını komut dosyaları yüklenene kadar geciktirir, bu da sayfanın yüklenmesi daha uzun sürebileceği anlamına gelir - özellikle de büyük komut dosyaları indiriyorsanız.

Komut dosyası etiketlerinizi sayfanın sonuna taşırsanız, tarayıcının komut dosyası etiketlerinden önce görüntüleri ve stil sayfalarını indirmesini sağlarsınız ve sayfa, komut dosyaları çalışmaya başlamadan önce büyük olasılıkla işlenmiş görünür. Bu aynı zamanda, komut dosyalarınızdaki bazı işlevlere bağlıysanız, sayfanın kullanıcı tarafından görülebilmesinden bir süre sonrasına kadar bunun kullanılamayacağı anlamına gelir.

Stiller veya öğeler ekliyorsanız (vb. Metin alanlarını daha zengin bir düzenleyiciyle değiştirirseniz), bu kullanıcı tarafından titreyerek görünür olacaktır.

Öğelere tıklama etkinlikleri ekliyorsanız, öğelerin kendileri görünür hale gelene kadar bunlar tıklanabilir olmayacaktır.

Bazen bu sorunlar, senaryolarınızı kafanıza koymanızı gerektirir, diğer zamanlarda ise onları en alta yapıştırarak iyi olursunuz.

IMHO (tamamen YSlow ve pek çok zeki insana karşı) komut dosyalarınızı baş etiketinde tutmalı ve çoğu zaman önbelleğe alınmalarına güvenmelisiniz.


9

Genel olarak komut dosyası referanslarını sayfanızın altına yerleştirmelisiniz. Komut dosyalarının yalnızca indirilmesi gerekmez, ayrıca blok serbest bırakılmadan ve sayfa oluşturma sürecine geçmeden önce değerlendirilmeli ve yürütülmelidir. Modernizr gibi şeyler en üste yerleştirilmelidir çünkü bazı özellik algılamalarının yanı sıra muhtemelen isteyeceğiniz HTML5 şimlerini de yapar.

Komut dosyalarını sayfanın altına yerleştirmek istemenizin bir başka nedeni de Tek Hata Noktaları veya SPOF'lardır. Bu, bir komut dosyası çağrısının zaman aşımına uğradığı veya başka bir nedenle sayfanın yürütülmesini engellediği yerdir. Bu, üçüncü taraf reklam kitaplıkları vb. İle çok fazla olabilir.

Evet, uygulamanızı nasıl tasarlayacağınız konusunda biraz daha fazla düşünmeniz gerekebilir, ancak benim için çok hızlı bir şekilde çok doğal hale geldiğini gördüm. En alttaki komut dosyasıyla son 4 yılda yüzlerce web uygulaması oluşturdum ve farkı söyleyebilirim. 500ms olabilirim, 5000ms olabilir ama hepsi önemli.


5

Gerçekten web sitenize bağlıdır. Gövdenin içindeki JavaScript işlevlerine erişiyor ve çalıştırıyorsanız, yüklenebilmesi için başlıkta buna başvurulmalıdır. Aksi takdirde, yalnızca tüm belge yüklendiğinde JavaScript'i çağıracaksanız, JavaScript'i gövdenin sonuna koymak akıllıca olacaktır. .JS dosyasını sonuna koyarak tüm sayfayı yükler ve ardından .JS dosyasını getirirsiniz. Bu şekilde, kullanıcı sayfayı hızlı bir şekilde görebilir ve sayfaya aşina olduğunda .JS dosyası indirilmiş olur.


4

Baştaki herhangi bir javascript, sayfa yüklenmeden önce değerlendirilecektir, bu da sayfanın yüklenmesi daha uzun sürüyormuş gibi hissettirecektir. Tüm javascript sondaysa olayların düzgün çalışmasını sağlamak biraz daha zordur, ancak jQuery bu sorunu sizin için hemen hemen çözer.


2
JQuery'nin bu sorunu nasıl ilgisizce çözdüğünden bahsedebilir misiniz?
Matthew Lock

jQuery, işleyicileri olaylara bağlamak için bir API'ye sahiptir
Draemon
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.