Javascript ve CSS ayrıştırma performansı

Question

Web uygulamasının performansını artırmaya çalışıyorum. Ana HTML sayfasını döndürmek için harcanan süreyi optimize etmek için kullanabileceğim metriklerim var, ancak bu HTML sayfalarında bulunan harici CSS ve JavaScript dosyaları hakkında endişelerim var. Bunlar, HTTP Expires üstbilgileriyle statik olarak sunulur, ancak uygulamanın tüm sayfaları arasında paylaşılır.

Tarayıcının, görüntülenen her bir sayfa için bu CSS ve JavaScript dosyalarını ayrıştırması gerektiğinden ve sitenin tüm CSS ve JavaScript'inin ortak dosyalarda paylaşılmasının performansı olumsuz etkileyeceğinden endişe ediyorum. Bu dosyaları ayırmaya çalışmalıyım, böylece her sayfadan yalnızca bu sayfa için gereken CSS ve JavaScript’e bağlantı veriyorum ya da çabalarım için çok az getiri alabildim mi?

Bunun için metrikleri oluşturmama yardımcı olabilecek araçlar var mı?

Answer 1

Bağlam: HTTP havai JS ve CSS ayrıştırma (eğer JS bir meg daha az olsa bile) tarayıcı performansına ayrıştırma etkisini göz ardı etmek yerine daha anlamlı olduğu doğru olsa da kendinizi almak için iyi bir yoldur başı dertte olmak.

YSlow, Fiddler ve Firebug, ayrıştırma hızını izlemek için en iyi araç değildir. Çok yakın zamanda güncellenmedikçe, HTTP üzerinden HTTP almak veya gerçek JS yükünü ayrıştırmak için harcanan süreye karşılık önbellekten yüklemek için gereken süreyi ayırmazlar.

Ayrıştırma hızını ölçmek biraz zordur, ancak bu metriği üzerinde çalıştığım projeler üzerinde birkaç kez kovaladık ve pageload'lar üzerindeki etki yaklaşık 500 bin JS ile bile önemliydi. Açıkçası eski tarayıcılar en çok acı çekiyor ... umarım Chrome, TraceMonkey ve benzerleri bu durumu çözer.

Öneri: Sitenizde, sizin JS yükü, bir en popüler sayfalarda asla kullanılmayacaktır JS nedenle bazı büyük boyutta bölmek iyi ise değer olabilir de sahip trafik türüne bağlı olarak asla müşteriye gönderilmez. Tabii ki, bu yeni bir müşteri bu JS'nin gerekli olduğu bir sayfaya ulaştığı zaman, onu tel üzerinden göndermeniz gerektiği anlamına gelir. Bununla birlikte, trafik örüntüleriniz nedeniyle, JS'nizin% 50'sinin kullanıcılarınızın% 80'ine hiç ihtiyaç duymadığı iyi olabilir. Bu durumda, sadece JS'nin gerekli olduğu sayfalarda daha küçük, paketlenmiş JS yüklerini kullanmanız gerekir. Aksi halde, kullanıcılarınızın% 80'i, numaralı numaralı pageload'da gereksiz JS ayrıştırma cezalarına maruz kalacaktır.

için Sonuç: Bu JS önbelleğe alma ve daha küçük, ambalajlı yükleri doğru dengeyi bulmak zor, ama trafik desen bağlı her tek pageload içine JS tüm çökertilmesi dışında bir teknikle kesinlikle dikkate değer.

Answer 2

YSlow'un yaptıklarına inanıyorum, ancak tüm isteklerin bir geri döngü bağlantısı üzerinde olmadığı sürece endişelenmemelisiniz. Ayrı ayrı dosyaların HTTP ek yükü, CSS/JS dosyalarınız birkaç megabayttan fazla olmadıkça, ayrıştırmadan daha fazla performansı etkileyecektir.

Answer 3

Kamen'in mükemmel cevabını eklemek için, bazı tarayıcılarda, daha büyük js kaynakları için ayrıştırma zamanının doğrusal olmayan şekilde büyüdüğünü söyleyebilirim. Yani, bir 1 MB'lık JS dosyası, iki 500k dosyadan daha uzun bir zaman ayırır. Dolayısıyla, trafiğinizin birçoğu, JS'nizi önbelleğe almış (ziyaretçileri geri döndürme) olan ve tüm JS dosyalarınız önbellek kararlı olan kişilerse, hepsini yüklemeye son verseniz bile onları kırmak mantıklı olabilir. her sayfa görüntüleme.