Yalnızca performansı önemsiyorsanız, bu konudaki tavsiyelerin çoğu tamamen yanlıştır ve sayfanın JS kodu olmadan işe yaramaz olduğunu varsayabileceğimiz SPA döneminde giderek daha fazla yanlış hale gelmektedir. SPA sayfa yükleme sürelerini optimize etmek ve bu sonuçları farklı tarayıcılarla doğrulamak için sayısız saatler harcadım. Genelde html'nizi yeniden düzenleyerek performans artışı oldukça dramatik olabilir.
En iyi performansı elde etmek için sayfaları iki aşamalı roketler olarak düşünmelisiniz. Bu iki aşama kabaca karşılık gelir <head>ve <body>aşamalar, ancak bunların yerine <static>ve olarak düşünün <dynamic>. Statik kısım, temelde yanıt borusunu olabildiğince hızlı bir şekilde aşağı ittiğiniz bir dizi sabitidir. Çerezleri ayarlayan çok sayıda ara yazılım kullanıyorsanız (bunların http içeriği gönderilmeden önce ayarlanması gerekir) bu biraz yanıltıcı olabilir, ancak prensipte, bazı şablon oluşturma kodlarına (jilet, php, vb) sunucuda. Bu kulağa zor gelebilir, ama sonra sadece yanlış açıklıyorum çünkü neredeyse önemsiz. Tahmin edebileceğiniz gibi, bu statik kısım tüm javascript satır içi ve küçültülmüş olarak içermelidir. Bir şeye benzeyecekti
<!DOCTYPE html>
<html>
<head>
<script>/*...inlined jquery, angular, your code*/</script>
<style>/* ditto css */</style>
</head>
<body>
<!-- inline all your templates, if applicable -->
<script type='template-mime' id='1'></script>
<script type='template-mime' id='2'></script>
<script type='template-mime' id='3'></script>
Bu kısmı kabloya göndermek size neredeyse hiçbir maliyeti olmadığı için, istemcinin bunu sunucunuza bağlandıktan sonra yaklaşık 5ms + gecikme süresi civarında bir yerde almaya başlayacağını bekleyebilirsiniz. Sunucunun oldukça yakın olduğunu varsayarsak, bu gecikme 20 ms ile 60 ms arasında olabilir. Tarayıcılar, bu bölümü alır almaz işlemeye başlayacaklar ve işlem süresi, normal olarak, aktarım süresine 20 veya daha fazla faktörle hakim olacaktır; bu, artık, <dynamic>kısmın sunucu tarafında işlenmesi için amortize edilmiş pencerenizdir .
Tarayıcının satır içi jquery + signalr + angular + ng animate + ng + ng rotaları + lodash'ı işlemesi yaklaşık 50ms sürer (krom, dinlenme belki% 20 daha yavaş). Bu başlı başına oldukça şaşırtıcı. Çoğu web uygulaması, tüm bu popüler kitaplıkların toplamından daha az koda sahiptir, ancak sizin de aynı miktarda sahip olduğunuzu varsayalım, bu nedenle istemcide gecikme + 100 ms işleme süresi kazanırız (bu gecikme kazancı ikinci aktarım yığınından gelir). İkinci parça geldiğinde, tüm js kodunu ve şablonlarını işledik ve dom dönüşümlerini gerçekleştirmeye başlayabiliriz.
Bu yöntemin satır içi kavramına ortogonal olduğuna itiraz edebilirsiniz, ancak öyle değildir. Satır içi yapmak yerine, cdns'ye veya kendi sunucularınıza bağlanırsanız, tarayıcının başka bir bağlantı (lar) açması ve yürütmeyi geciktirmesi gerekir. Bu yürütme temelde ücretsiz olduğundan (sunucu tarafı veritabanıyla konuştuğundan), tüm bu atlamaların hiç atlama yapmamaktan daha pahalıya mal olacağı açık olmalıdır. Harici js'nin daha hızlı çalıştığını söyleyen bir tarayıcı tuhaflığı olsaydı, hangi faktörün baskın olduğunu ölçebilirdik. Ölçümlerim, ekstra taleplerin bu aşamadaki performansı düşürdüğünü gösteriyor.
SPA uygulamalarının optimizasyonu ile çok çalışıyorum. İnsanların veri hacminin önemli olduğunu düşünmesi yaygındır, gerçekte gecikme ve yürütme genellikle baskındır. Listelediğim küçültülmüş kitaplıklar 300 kb'a kadar veri ekler ve bu yalnızca 68 kb gzip'lenmiş veya 2mbit 3g / 4g telefonda 200ms indirme, aynı verilere sahip olup olmadığını kontrol etmek için aynı telefonda alacağı gecikme süresidir. zaten önbelleğinde, proxy önbelleğe alınmış olsa bile, çünkü mobil gecikme vergisi (telefondan kuleye gecikme) hala geçerli. Bu arada, daha düşük ilk atlama gecikmesine sahip masaüstü bağlantıları genellikle daha yüksek bant genişliğine sahiptir.
Kısacası, şu anda (2014), tüm komut dosyalarını, stilleri ve şablonları satır içi yapmak en iyisidir.
DÜZENLEME (MAYIS 2016)
JS uygulamaları büyümeye devam ettikçe ve yüklerimden bazıları artık 3+ megabayta kadar küçültülmüş kod yığıldıkça, en azından yaygın kitaplıkların artık satır içi olmaması gerektiği aşikar hale geliyor.