“Javascript'i en alta koymak” belgenin amacını ortadan kaldırıyor mu? Zaten?


26

Javascript'i sayfanın altına koymanın tavsiye edildiğini biliyorum, ancak jQuery kullanıyorsam bu DOM yüklüyormuş gibi çalıştırmak amacını bozmuyor mu?

Örneğin bir açılır menüm varsa, açılır pencereler sayfanın geri kalanı yüklenene kadar gösterilmez. Ayrıca ilerici bir gelişme göz önünde bulundurarak da geliştirmeye çalışıyorum, bu yüzden CSS yerine jQuery ile gizlenmiş unsurlara sahip olabilirim (JS olmayan kullanıcılar bunları görebilir).

Belki mutlu bir ortam var mı?


Ters problemi yaşıyorum. Kenar çubuğu oluşturan ve konumlandıran bir komut dosyasına sahibim, ancak ne yazık ki sayfa, komut dosyası çalıştırılmadan önce oluşturuluyor ve sayfa öğeleri yeni konumlarda yeniden çizilirken çirkin bir sarsıntıya neden oluyor. Senaryomu bitirene kadar renderlemeyi engellemek mümkün mü, yoksa bedenim ve pozisyonum ilk renderden önce çalışıyor mu?

3
Bu soru StackOverflow'a ait değil mi?
Marco Demaio

Yanıtlar:


30

Document.ready, DOM'un herhangi bir JavaScript çalıştırmadan önce yüklenmesini bekler (http://www.learningjquery.com/2006/09/introducing-document-ready).

En alt noktaya koyma fikri, eğer JS'nizin sorunları yaşıyorsa ya da kişinin bağlantısı yavaşsa, sayfanın geri kalanının hala önce yüklendiği ve "takılmadığı" anlamına gelir.

JS, her şey yüklendiğinde, başlangıçta veya bitişte olsa da hala çalışır.


6

Javascript'i aşağıya yerleştirmek, diğer sayfa içeriğinin (özellikle metin) javascriptten önce yüklendiği ve böylece kullanıcıların yavaş bağlantıları varsa JS'nin yüklenmesini beklemeyeceği anlamına gelir.

Bu, belgeyi etkilemez. Zaten, tarayıcı DOM'yi bir sayfa için hazırlamayı bitirdiğinde çağrılır. Her iki durumda da, önce her şeyin hala yüklenmesi gerekiyor.


3

Bir komut dosyasının HTML yüklemesi bitinceye kadar fiili kullanımı yoktur; bir komut dosyası, HTML yüklenene kadar DOM’yi değiştiremez document.readyDOM'un yüklenmesini bekler. Yani, stil sayfaları gibi önemli şeyleri tuttuğunun anlamı yok.

</body>HTML ve CSS’nizi olabildiğince hızlı bir şekilde kullanıcıya ulaştırmak için komut dosyalarını sayfanın en altına ( etiketten önce ) yerleştirin. Tarayıcı, sayfayı çok daha hızlı hale getirebilecek ve ardından komut dosyalarının indirilmesini beklerken kullanıcının bakması için boş bir sayfa bırakmak yerine komut dosyaları yüklenebilecektir.

Tarayıcı aşamalı olarak sayfayı görüntülerken, bir komut dosyası etiketine (örneğin harici bir Javascript dosyası) vurursa her şey durur . Komut dosyalarının geçiş hakkı vardır - bir komut dosyası indirilirken tarayıcı başka bir indirme işlemine başlamaz. yani Görüntüler ve stil sayfaları ve diğer paralel indirmeler, farklı ana bilgisayar adlarında bile engellenir.

Komut dizilerini sayfanın altına koymanın dezavantajı, sayfanın komut dizileri başlatılmadan önce oluşturulacağı için, özellikle hızlı tıklamalar Javascript hazır olmadan önce sitenizle etkileşime girebilecek.

Not: Stil sayfaları için tam tersi geçerlidir - tüm stil sayfaları indirilip belgeye taşınana dek, sayfa stilinin ilerlemesini sağlayan sayfa stilleri, stil stilleri indirilip belgeye taşındığında HEADsorun ortadan kalkar.


Javascript'i kullanıcının beklemesine gerek kalmadan yüklemek için düzgün bir numara var, <script/>DOM createElement()yöntemini kullanarak bir öğe oluşturabilir ve onu kapanış </body>etiketinden hemen önce sayfaya ekleyebilirsiniz :

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

Tarayıcı, yeni <script/>eleman gerçekten sayfaya ekleninceye kadar js betiğini indirmeye başlamaz . İndirme işlemi tamamlandıktan sonra, tarayıcı içinde bulunan Javascript kodunu yorumlar.


1
Tamamen doğru değil. Senaryo onlar çünkü komut engelliyor yüzden Aslında ... HTML yüklenir Hepsi daha önce DOM değiştirebilir olabilir sayfasını değiştirir. Bununla birlikte, çoğu durumda geliştiricilerin DOM yüklenene kadar 'davranış' komut dosyalarını eklemelerine gerek yoktur.
scunliffe

1

Evet. Komut dosyalarını en altına koyarsanız, doc.ready( DOMContentLoadedolay) artık gerekli değildir - komut dosyanız bir önceki tüm DOM yine de yüklendikten sonra yürütülür.

Sonunda bulunan komut dosyaları performansı iyileştirdiğinden (HTML'nin CSS ve görüntülerin kodlanması ve yüklenmesi komut dosyaları tarafından engellenmez) Kullanmak yerine komut dosyalarını en altına koymanızı öneririz doc.ready.

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.