Yanıtlar:
Tüm komut dosyaları en son yüklenmelidir
Hemen hemen her durumda, tüm komut dosyası referanslarınızı sayfanın sonuna, hemen öncesine yerleştirmek en iyisidir </body>.
Geçici sorunlar ve ne olursa olsun bunu yapamıyorsanız defer, tarayıcınızın HTML indirildikten sonra komut dosyalarınızı indirmesini bilmesi için komut dosyası etiketlerinizi niteliğiyle dekore edin :
<script src="my.js" type="text/javascript" defer="defer"></script>Edge kutuları
Bazı kenar durumlarda ancak, sayfa titrek ve genellikle basitçe içinde jQuery script referanslarını yerleştirerek çözülebilir sayfa yükleme sırasında diğer eserler karşılaşabilirsiniz nerede vardır <head>etiketi olmadandefer özniteliği. Bu durumlar, jQuery kullanıcı arayüzünü ve DOM'u işlevlerinin bir parçası olarak değiştiren jCarousel veya Treeview gibi diğer eklentileri içerir.
Diğer uyarılar
Çoklu dolgular gibi DOM veya CSS'den önce yüklenmesi gereken bazı kütüphaneler vardır. Modernizr, kafa etiketine yerleştirilmesi gereken böyle bir kütüphanedir .
<head>. İşaretlemeniz sizin için içeriği sıralayan jQuery eklentisine bağımlıysa, eklentiler yüklenene kadar web sayfanızda korkak işaretleme elde edeceğiniz için eklenti referansını sayfanın altına koymanın bir anlamı yoktur. Kurallar, artık çalışmaz hale gelene kadar uyulmalıdır, bu noktada kurallar çiğnenmelidir.
Komut dosyalarının neden olduğu sorun paralel indirmeleri engellemesidir. HTTP / 1.1 belirtimi, tarayıcıların ana makine adı başına paralel olarak en fazla iki bileşen indirmesini öneriyor. Resimlerinizi birden çok ana bilgisayar adından sunuyorsanız, paralel olarak ikiden fazla indirme gerçekleştirebilirsiniz. Ancak bir komut dosyası indirilirken, tarayıcı farklı ana bilgisayar adlarında bile başka herhangi bir indirmeye başlamaz. Bazı durumlarda, komut dosyalarını alt tarafa taşımak kolay değildir. Örneğin, komut dosyası sayfanın içeriğinin bir kısmını eklemek için document.write kullanırsa, sayfanın altına taşınamaz. Kapsam belirleme sorunları da olabilir. Birçok durumda, bu durumları geçici olarak çözmenin yolları vardır.
Genellikle ortaya çıkan alternatif bir öneri, ertelenmiş komut dosyaları kullanmaktır. DEFER özniteliği, komut dosyasının document.write içermediğini ve tarayıcılar için oluşturmaya devam edebilecekleri konusunda bir ipucu olduğunu belirtir. Ne yazık ki Firefox, DEFER özelliğini desteklemiyor. Internet Explorer'da komut dosyası ertelenebilir, ancak istendiği kadar olmayabilir. Bir komut dosyası ertelenebilirse, sayfanın altına da taşınabilir. Bu, web sayfalarınızın daha hızlı yüklenmesini sağlayacaktır.
EDIT: Firefox, sürüm 3.6'dan beri DEFER özniteliğini desteklemiyor.
Kaynaklar:
Tabii ki CDQ ile sadece kafasına jQuery yükleyin.
Neden? Bazı senaryolarda, katıştırılmış jQuery bağımlı kodlu kısmi bir şablon (ör. Ajax oturum açma formu snippet'i); jQuery sayfanın altına yüklenirse, "$ tanımlı değil" hatası alırsınız, güzel.
Bu geçici çözüm yolları vardır (herhangi bir JS gömme ve bir altta yük js paketi eklemek gibi), ama neden tembel yüklenen js, jQuery bağımlı kodu istediğiniz herhangi bir yere yerleştirme özgürlüğünü kaybetmek ? Javascript motoru, bağımlılıklar (jQuery yükleniyor gibi) karşılandığı sürece kodun DOM'da nerede yaşadığını umursamaz.
Ortak / paylaşılan js dosyalarınız için, evet, onları daha önce yerleştirin </body>, ancak istisnalar için, html'nin o noktasında oraya bir jQuery bağımlı snippet veya dosya referansını yapıştırmanın gerçekten mantıklı olduğu uygulamalarda bunu yapın.
Kafada performans isabetli yükleme jquery yoktur; gezegendeki hangi tarayıcıda zaten jQuery CDN dosyası önbellekte yok?
Hiçbir şey hakkında çok ado, jQuery kafasına sopa ve js özgürlük saltanatı izin.
2%yarısı sayfa ilk kez yüklenmeden önce ayrılacaktır. Bu şekilde 1%ziyaretçileri kaybediyorsunuz , ancak potansiyel olarak kendinizi çok fazla geliştirme zamanı ve sıkıntıdan kurtarıyorsunuz. Bunun iş modelinizle mantıklı olup olmadığına bakın ...
Nimbuz , konuyla ilgili çok iyi bir açıklama sunuyor, ancak son cevabın sayfanıza bağlı olduğunu düşünüyorum: kullanıcının daha erken olması için daha önemli olan komut dosyaları veya resimler?
Görüntüler olmadan mantıklı olmayan, ancak yalnızca küçük, gerekli olmayan komut dosyalarına sahip bazı sayfalar vardır. Bu durumda, alt kısımdaki komut dosyalarını koymak mantıklıdır, böylece kullanıcı görüntüleri daha erken görebilir ve sayfayı anlamlandırmaya başlayabilir. Diğer sayfalar çalışmak için komut dizisine dayanır. Bu durumda, görüntüler olmayan bir çalışma sayfasına sahip olmak, görüntülerle çalışmayan bir sayfadan daha iyidir, bu nedenle komut dosyalarını en üste koymak mantıklıdır.
Dikkate alınması gereken başka bir şey, komut dosyalarının genellikle görüntülerden daha küçük olmasıdır. Tabii ki, bu bir genelleme ve sayfanız için geçerli olup olmadığını görmek zorundasınız. Eğer bunu yaparsa, bana göre, onları ilk önce bir kural olarak koymak için bir argüman (başka türlü yapmak için iyi bir neden olmadığı sürece), çünkü görüntüleri betikleri geciktireceği kadar geciktirmezler. Son olarak, en üstte komut dosyası olması çok daha kolaydır, çünkü bunları kullanmanız gerektiğinde henüz yüklenip yüklenmedikleri konusunda endişelenmenize gerek yoktur.
Özet olarak, komut dosyalarını varsayılan olarak en üste koyma eğilimindeyim ve yalnızca sayfa tamamlandıktan sonra bunları alta indirmeye değip değmeyeceğini düşünüyorum. Bu bir optimizasyon - ve bunu erken yapmak istemiyorum.
Çoğu jquery kodu, yine de sayfanın sonuna kadar gerçekleşmeyen belge üzerinde yürütülür. Ayrıca, javascript ayrıştırma / yürütme ile sayfa oluşturma gecikebilir, bu nedenle tüm javascript'i sayfanın altına yerleştirmek en iyi uygulamadır.
Standart uygulama, tüm komut dosyalarınızı sayfanın altına koymaktır, ancak ASP.NET MVC'yi bir dizi jQuery eklentisi ile kullanıyorum ve jQuery komut dosyalarını <head>master'ın bölümüne koyarsam her şeyin daha iyi çalıştığını görüyorum sayfa.
Benim durumumda, komut dosyaları sayfanın altındaysa, sayfa yüklendiğinde oluşan eserler vardır. Ben jQuery TreeView eklentisini kullanıyorum ve komut dosyaları başlangıçta yüklü değilse, ağaç eklenti tarafından dayatılan gerekli CSS sınıfları olmadan işleyecektir. Böylece, sayfa ilk yüklendiğinde komik görünümlü bir karışıklık yaşarsınız, ardından TreeView'in düzgün oluşturulması sağlanır. Çok kötü görünüyor. JQuery eklentilerini <head>kalıp sayfanın bölümüne yerleştirmek bu sorunu ortadan kaldırır.
@Html.ActionKısmi benim $ is undefinedyerine bunun yerine kısmi yüklemek için .load ('@ Url.Action') kullanmak zorunda anlam verdiği için, kullanmaya çalışırken , bu çıktı dinamik bir sonuç yazar, bu konuda sorunlarla karşı karşıya . Ancak bu ekstra istek nedeniyle bir fouc verir. Girişinize dayanarak, jquery'yi ana sayfamdaki RenderBody () üzerine taşıyacağım
Hemen hemen tüm web siteleri hala Jquery ve diğer javascript başlıklarını D'ye yerleştirse de, stackoverflow.com'u kontrol edin.
Ayrıca vücudun son etiketinden önce koymanızı öneririm. Her iki yere yerleştirdikten sonra yükleme süresini kontrol edebilirsiniz. Komut dosyası etiketi, daha fazla yüklenmesi için web sayfanızı duraklatır.
ve javascript'i altbilgiye yerleştirdikten sonra, javascript'i yükleyene kadar web sayfanızın alışılmadık görünümlerini elde edebilirsiniz, bu nedenle başlık bölümünüze css yerleştirin.
Hemen önce </body>en iyi yer uygun olan Yahoo Geliştirici Ağı 'ın Web Sitesi hızlandırmak için En İyi Uygulamalara bu bağlantıyı , çok mantıklı.
Yapılacak en iyi şey kendiniz test etmektir.
Benim için jQuery biraz özel. Belki norm için bir istisna. Buna güvenen çok fazla komut dosyası var, bu yüzden erken yüklenmesi oldukça önemlidir, böylece daha sonra gelen diğer komut dosyaları amaçlandığı gibi çalışacaktır. Başka birinin işaret ettiği gibi, bu sayfa bile baş bölümüne jQuery yükler.