Satır içi JavaScript iyi mi kötü mü?

Şu anda WordPress'ten Yii çerçevesine geçtim ve harici bir geliştirici sitemi yeniden inşa ediyor.

Fark ettiğim bir şey, her AJAX / jQuery Yii yolunu çağırdığında , web sayfasına JavaScript satır içi ekler . JavaScript kodu altbilginin altına yerleştirilmiş gibi görünse de, hala satır içi.

Genel olarak, JavaScript kodunun web sayfasının içine daha sık konulduğu görülmektedir. Her zaman JavaScript komut dosyalarının olabildiğince JavaScript dosyalarına yerleştirilmesi gerektiği düşünülüyordu. Bu yeni bir "yeni" trend mi? Yoksa yine de JavaScript kodunu ayrı dosyalarda tutmaya çalışmalı mıyım?

Satır içi JavaScript, sayfa için indirme sürelerini artırır; bu iyi değildir. Bir .jsdosyaya yapılan çağrıda , en azından bunlar paralel çağrılar olabilir ve içerik indirme süreleri azaltılabilir. Evet, JavaScript'i doğrudan HTML koduna koymanın uygun olduğu zamanlar vardır, ancak bunu mümkün olduğunca yüklemeden çıkarmanız daha iyidir.

Sayfa indirme sürelerinin (HTML) tüm kaynak çağrılarının sıralamayı etkileyen metrikleri etkilemediğini (PageRank veya önemsiz SERP'lerde olsa da) unutmayın. Mesele şu ki, SEO için bir sitenin performansını etkiler, ancak tezahür eder.

Para birimi dönüştürme sitemde, oturumların çoğu tek sayfa görüntüleme sayısıdır. Bunun nedeni, kullanıcıların para birimi hesaplamalarını doğrudan açılış sayfasında yapabilmesidir (tüm hesaplama istemci tarafında JavaScript ile gerçekleştirilir.)

Sayfam, tüm kaynaklar (css, js ve hatta resimler ) sayfada satır içi olduğunda yaklaşık yarı sürede indirilir ve oluşturulur . Kullanıcılarımın çok azı birden fazla sayfa görüntülediğinden, bu kaynakların bazılarının sayfa görünümleri arasında önbelleğe alınmasından pek faydalanmam.

Sitem tipik değil. Çoğu sitede oturum başına birden çok sayfa ve tekniğimin daha az uygulanabilir olmasını sağlayacak büyük resimler bulunur. Bu sorunun tek bir doğru çözümü yoktur; siteye bağlıdır. Sen gerek kendiniz ölçmek için kullanıcıların tipik davranışına göre.

HTML dosyanızın içinde JavaScript olması zorunlu değildir, ancak üzerinde bir yargılama çağrısı yapmanız gerekir.

Bu ise JavaScript büyük miktarda Birden fazla sayfada kullanılan varsa kötü. Bu durumda, JavaScript harici, sıkıştırılmış ve önbelleğe alınabilir bir dosyada olmalıdır ve siteniz çok yoğun bir trafiğe sahipse bir CDN kullanmalısınız.

Bununla birlikte, az miktarda JavaScript'iniz varsa, harici bir dosyaya koymanın kaydedilmesi, onu almak için ek bir HTTP isteği yapmanız gerektiği gerçeğiyle reddedilebilir. Bu durumda JavaScript'i sayfanızda tutmak daha verimli olur.

Daha sonra, aynı küçük JavaScript snippet'i birden fazla sayfada kullanılıyorsa, önbelleğe almanın avantajından yararlanmak için harici bir dosyaya yerleştirmek yararlı olacaktır.

Nihayetinde, ek HTTP istekleri yapma yükü karşısında JavaScript'in boyutunu tartmanız gerekir. Çoğunlukla, 'ortalama' bir site için, sadece harici bir dosyaya koyarak büyük bir fark yaratmayacaktır.

Ben bir Yii geliştiricisiyim ve size söyleyebilirim ki, Yii'nin bununla hiçbir ilgisi yok . Öyle geliştirici tarafında tamamen o ayrı dosyaya Javascript kodu koymak ve HTML (görünüm) sayfa ile kayıt edip, CClientScript::registerScriptFileyönteme veya görünüme doğrudan (HTML) kodu koymak ve kullanarak kayıt CClientScript::registerScriptyöntemi.

Cevabınıza göre, çoğu (profesyonel?) Yii geliştiricisi ilk yaklaşım için şiddetle oy veriyor, yani - mümkün olduğunca ayrı dosyalarda Javascript kodu tutuyor. Yani, bu kesinlikle değil yeni bir kodlama eğilimi , aksine kötü bir geliştirici uygulamasıdır. En azından Yii topluluğunda böyle görülüyor.

EDIT : Aslında, en önemli argümanı unuttum. Yii (ve diğer birçok profesyonel PHP çerçevesi) MVC tasarım deseni (aslında: mimari desen) üzerine kuruludur . Aynı desen ön tarafta da kullanılabilir: HTML kodu modeldir (veri), CSS görünümdür (dekoratör) ve Javascript denetleyicidir. Hepsi koymak ayrı dosyalar halinde , .jsve .css, minified obsfucated ve en iyi senaryo gzip'lenmiş - dosyaları.

Yii uygulamanızı oluşturduğunuzda, MVC desenini kırabilir ve her şeyi aynı dosyada tutabilirsiniz. Soru şu - buna değer mi, faydaları (hiçbiri?) Ve bu sizi nereye götürecek? JS kodunu satır içi tutmak isteyip istemediğinizi sorarken aynı argümanı kullanabilirsiniz?

Aslında geliştirdiğiniz web sayfasının amacına bağlıdır:

Küçük bir satır içi JavaScript kullanıyorum, oysa büyükse harici JavaScript dosyaları için gitmeyi tercih ediyorum.

Her iki durumda da, sayfa JavaScript yüklediğinde, önce yürütülmesi gerekir. En iyi uygulama harici JavaScript kullanmaktır, böylece sayfa içeriğinizi uzatmaz. Ayrıca hata ayıklamayı kolaylaştırır.

Cevap aslında ne yapıldığına bağlıdır.

Web sitesi genelinde kullanılan satır içi JavaScript fark ederseniz (örneğin, web sitesinin tüm sayfalarında başlığın içinde gösterilen bir widget), bunu "ortak" bir JavaScript dosyasına taşımak uygun olur.

Aslında, tek bir sayfada kullanılmış olsa bile, mümkün olduğunca çok JavaScript'i ortak bir JavaScript dosyasına taşıyacağım. Sunucuyu JavaScript dosyaları için güçlü önbellek ve sıkıştırma başlıkları gönderecek şekilde yapılandıracağım; sayfaların boyutunu azaltır ancak JavaScript dosyasının boyutunu çok fazla artırmaz.

Öte yandan, JavaScript basitçe bir grup yapılandırma seçeneği / başlatma ise, örneğin:

$(function () {
    myplugin({
        images: ["img1", "img2", "img3"]
    });
});

bazı nedenlerden dolayı kodu harici JavaScript dosyasına taşımak mümkün değildi (örneğin, görüntü parametreleri veritabanından geliyorsa) satır içinde tutardım. Bunu söyledikten sonra, "mütevazi" olan üçüncü taraf eklentileri seçerdim (veya bunları böyle dönüştürür).

Bu cevaplar işareti kaçırıyor. Satır içi önbelleklemeye bir göz atın .

Yii PHP'de kodlandığından, bulacağınız yaygın (veya belki de nadir) bir PHP kalıbı, geliştiricilerin bazen sunucu tarafından bilinen bir duruma, koşula veya değere bağlı olarak sunucuda dinamik olarak Javascript kodu oluşturmak için PHP kodu yazmalarıdır. ve ardından istemcinin işlevi yürütmesine ve sunucu tarafından daha önce yapılmış olan hesaplamaların bazılarını atlamasına olanak tanıyarak tümünü tek bir toplu işte istemciye gönderin.

Veriler sağlanana kadar (sunucuda oturan ve gidiş-dönüş yolculuğu gerektiren veriler) sağlanana kadar bir .js dosyasındaki bir dizi genel Javascript işlevini istemciye göndermek yerine, "pişirebilir" Javascript işlevinin bir parçası olarak bağlam / veriler. Bu zahmetlidir çünkü işlevselliği / verileri birlikte gönderiyorsunuz ve tüm uygulamayı ilk sayfa yüklemesinde göndermek yerine yalnızca bir müşterinin ihtiyaç duyabileceği işlevselliği / verileri gönderiyorsunuz demektir. Ayrıca, tüm uygulamanızı ilk sayfa yüklemesinde kolayca indirilip tersine mühendislik işlemine maruz bırakmanız gerekmediği anlamına gelir, çünkü her bir müşterinin o anda ihtiyaç duyabileceği küçük işlevsellik bölümlerini enjekte edersiniz. Bu SEO için ne kadar iyi emin değilim, ama buna göre optimize edilebilir eminim.

Son kullanıcının WYSIWYG düzenleyicisi kullanarak bazı CMS yazılımlarında sayfa yazması durumunu düşünün. Bu kullanıcı sunucudaki kaynak .js dosyalarınıza erişemediğinde sayfaya nasıl yeni işlevler ekleyecek? HTML sekmesine geçer ve satır içi Javascript kullanırlar.

Tüm satır içi Javascript kötü değildir; bazen onclick de iyidir. Genel bir öneri olarak, satır içi Javascript yazmaktan kaçının ve iyi alışkanlıklar oluşturma yolundasınız.

Referanslar:

• Satır içi önbellekleme
• Satır içi önbelleklerle dinamik JavaScript'i en iyileştirme
• JavaScript'teki JavaScript VM'lerini Açıklama - Satır İçi Önbellekler
• Satır İçi Komut Dosyalarından Neden Kaçının? (MainMa'nın ve kullanıcı1389596'nın cevabına bakın)

Normalde satır içi JS kodu, diğerleri benden önce söylediğim gibi kötü.

Ama inline JS'nin daha iyi olduğu bir kullanım durumu düşünüyorum .

JS güdümlü bir galeri ekleyen bir CMS düşünün. Galeri belki jQuery'de yapılır. Yalnızca sayfada benzersiz değil, aynı zamanda tüm site genelinde benzersiz olan bir kimlik özelliği ile tanımlanır. Bu durumda — bence — satır içi JS daha iyi olurdu, çünkü JS kodu yalnızca bir sayfada kullanıldı ve HTTP ek yükünüz yok