Tek sayfalık bir web sitesi tasarlıyorsam, JS kodum için harici dosya oluşturmak mı yoksa html koduna koymak mı daha iyi? Sayfaya yerleştirmek daha hızlı mı yükleniyor? Kullanıcıların kod isteklerini reddetmek için izinleri değiştirebilir miyim, ancak html sayfası yine de kodu çağırabilir mi?
Yanıtlar:
JS kodunuzu ayrı bir dosyaya koymalısınız, çünkü bu test etmeyi ve geliştirmeyi kolaylaştırır. Kodu nasıl kullandığınız sorusu farklı bir konudur.
HTML ve JS'nin ayrı ayrı sunulması, bir istemcinin JS'yi önbelleğe alabilmesi avantajına sahiptir. Bu, istemcinin her seferinde yeni bir istek göndermemesi için uygun başlıklar göndermenizi gerektirir. Bir güncelleştirme gerçekleştirmek ve böylece istemci önbelleklerini geçersiz kılmak istiyorsanız önbellekleme sorunludur. Bir yöntem dosya adına bir sürüm numarası eklemektir, örn /static/mylibrary-1.12.2.js.
JS ayrı bir dosyadaysa, dosyaya erişimi kısıtlayamazsınız: HTML sayfanızda başvurduğunuz veya birisinin dosyayı indirmek istediği için bir JS dosyasına istekte bulunup bulunmadığını söylemek zordur (teknik olarak: imkansız). direkt olarak. Ancak, çerezleri kullanabilir ve belirli çerezleri iletmeyen (ancak bu aptalca olur) istemcilere hizmet vermeyi reddedebilirsiniz.
JS'nin HTML içinde sunulması her sayfanın boyutunu artırır - ancak bir istemcinin birden fazla sayfayı görüntülemesi olası değilse bu sorun olmaz. İstemci JS için ayrı bir istek yayınlamadığından, bu strateji sayfayı daha hızlı yükler - en azından ilk kez, ancak önbelleğe almanın daha iyi olduğu bir başabaş noktası vardır. JS'yi örneğin PHP yoluyla ekleyebilirsiniz.
Burada istemcinin isterseniz JS dosyasına gizlenebilir ayrı erişim gerekmez. Ancak herkes HTML içindeki JS kodunu görüntüleyebilir.
Yükleme sürelerini en aza indirecek diğer stratejiler arasında
Hizmet verdiğiniz JS dosyasının boyutunu azaltan JS minimizasyonu . Küçültme, kodu dağıtırken yalnızca bir kez gerçekleştiğinden, bayt tasarrufu için çok etkili bir yöntemdir. OTOH bu, kodunuzu ilgilenen ziyaretçiler için anlaşılmasını zorlaştırır.
Minification ile ilgili tüm JS dosyalarınızı tek bir dosyada birleştirme uygulamasıdır. Bu, gerekli isteklerin sayısını azaltır.
Sıkıştırma, istemcideki ve sunucudaki her istek için bir hesaplama yükü ekler. Ancak sıkıştırmak için harcanan zaman (de-) sıkıştırılmamış verilerin iletilmesi için harcanan zamandan daha azdır. Sıkıştırma genellikle sunucu yazılımı tarafından şeffaf bir şekilde gerçekleştirilir.
Bu teknikler görüntüler gibi diğer kaynaklar için de geçerlidir.
Tek sayfalık bir web sitesi tasarlıyorum
Kelimenin tam anlamıyla bir sayfanız varsa, evet, tek bir dosyadaki her şeyi sunmak daha iyidir (performans açısından) ... stil sayfaları, JavaScript ve hatta görüntüler (veri URI'leri ile satırlanmış küçük görüntüler). Bu, nispeten yavaş olan harici kaynakları almak için gereken ek HTTP isteklerini ortadan kaldırır.
Ortaya çıkan dosya, tüm metin yanıtının boyutunu büyük ölçüde azaltacak şekilde sunulmadan önce sıkıştırılmalıdır.
Veri URI'lerinin boyutuyla ve tarayıcı uyumluluğuyla ilgili sınırlamalar bulunduğundan, sayfanın dışında büyük resimlere sahip olmayı düşünmelisiniz. (örn. IE8'in 32KB sınırı vardır, bu da base64 kodlamasının doğası gereği yaklaşık 23 KB gerçek dosya boyutuna eşittir.)
Kullanıcıların kod isteklerini reddetmek için izinleri değiştirebilir miyim, ancak html sayfası yine de kodu çağırabilir mi?
Hayır. En iyi ihtimalle, geçici gözlemciden "gizlemek" için kod gizlenebilir, ancak gerçek bir koruma sunmaz.
İstemci tarafı JS kodu tarayıcı tarafından görülmelidir (yani, sayfanın doğrudan JS kullanması gerekiyorsa) - bu, tarayıcı tarafından indirilmesi gerektiği anlamına gelir.
Bir tarayıcıyı indiremiyorsa sayfada JS kullanamazsınız.
Bu bağlamda, JS'yi satır içine alırsanız veya bir dosyaya koyarsanız, ortak uygulama bir JS dosyası kullanmaktır (bir tanesi için endişelerin ayrılması).
Tarayıcıya göstermek istemediğiniz bir kodunuz varsa, sunucu tarafı kodunu kullanmanız gerekir (node.js, php, perl, asp.net, jsp - çok fazla seçenek vardır) ve onunla etkileşime geçmeniz gerekir. ilk sayfa yüklemelerinde veya AJAX kullanarak tarayıcıdan .
Bu, kod miktarına ve bir kodlayıcıya karşı bir programcı / yazılım mühendisi olmanın ne kadar ciddi olduğuna bağlıdır. Kısa kod snippet'lerini doğrudan HTML'ye koyan tasarımcılarla çalıştım ve saçmalarken gerçekten işe yaradı.
Bu kendim yapacağım bir şey olmasa da ve en iyi yazılım geliştirme uygulamalarını bilmek istiyorsanız, harici *.jsdosyadaki her şeyi pu'ye eklemenizi ve <script>etiketlerle yüklemenizi şiddetle tavsiye ederim .
İkinci noktanıza ilişkin olarak, kodunuzu görüntülemek için kullanıcı veya tarayıcıyı inkar edemezsiniz obfuscation, kodunuzu okumayı zorlaştıracak denilen bir şey vardır , ancak performans düşecektir.
JS kodum için harici dosya oluşturmak veya sadece html koduna koymak daha mı iyidir?
JS kodunuz için harici bir dosya oluşturmak daha iyidir. Ayrıca, istemciye sunduğunuz bir veya iki dosyaya sahip olmak daha iyidir. Ancak, sürdürülebilirlik sorunları için JS kodunuzun birden fazla dosyaya bölünmesi de daha iyidir. Bunu yapabilmek için Gulp gibi farklı JS dosyalarınızı tek bir dosyada birleştirecek olan ön işlemcileri kullanabilirsiniz .
İstemcinin işlemesi için daha az HTTP isteği olacağından, daha az dosya sunmak daha iyidir.
Sayfaya yerleştirmek daha hızlı mı yükleniyor?
Evet, HTML için yalnızca bir istek yaptığınızdan, harici olarak JS kodunuzla çok sayıda istek (en az 2) yaptığınızdan, daha hızlı olduğu açıktır. Bu yalnızca JS kodunuz her iki tarafta da küçültülmediyse ve bu, tek bir HTML sayfasında kodunuzu korumanın ne kadar zor olacağını dikkate almaz.
Kullanıcıların kod isteklerini reddetmek için izinleri değiştirebilir miyim, ancak html sayfası yine de kodu çağırabilir mi?
Hayır yapamazsın. JS kodu, CSS kodu ve HTML kodu gibi statik içeriktir. Bu, tarayıcıya girdikten sonra istemci onu ve içeriğini tamamen indirebileceği anlamına gelir. Her bir dosya, resim, script indirilmeye açıktır. Ancak , kodunuzu küçültebilir / büyütebilirsiniz , böylece bir insanın onu kullanması daha zordur. Bu sadece önce performans için yapılan çirkinleşmenin bir sonucudur .
Html ve javascript içeriğini ayrı dosyalara ayırmanın birçok avantajı: