it-swarm-tr.com

Javascript’i performansı optimize etmek için bir sayfaya yüklemek için en iyi yol nedir?

JavaScript'imi daha hızlı yüklenmesini sağlayacak bir sayfaya yüklemek için bir yol var mı?

14
Jason

Yapabileceğiniz birkaç şey var:

  1. Javascript'ten önce HTML ve CSS'i yükleyin. Bu, tarayıcıya sayfayı yerleştirmek ve oluşturmak için gereken her şeyi verir. Bu, kullanıcıya sayfanın çabuk olduğu izlenimini verir. Komut dosyası etiketlerini veya blokları, kapanış gövdesi etiketine mümkün olduğunca yakın yerleştirin.

  2. Bir CDN kullanmayı düşünün. JQuery gibi popüler kütüphanelerden herhangi birini kullanıyorsanız, birçok şirket (örneğin, google, yahoo) kütüphaneleri yüklemek için kullanabileceğiniz ücretsiz CDN'ler kullanır.

  3. Kod yüklemek için gömülü bir komut dosyası yerine harici bir dosya kullanın. Bu, tarayıcıya JS içeriğini önbelleğe alma fırsatı verir ve hiçbir şekilde yüklemesi gerekmez. Ardışık sayfa yüklemeleri daha hızlı olacaktır.

  4. Web sunucusundaki Zip sıkıştırmasını açın.

Yahoo, sayfa yükleme sürelerini azaltmaya yardımcı olabilecek bir harika sayfa öneri içeriyor.

14

Minifing'in yanı sıra, gziping ve CDNing (yeni kelime?). Ertelemeyi yüklemeyi düşünmelisiniz. Temel olarak bunun yaptığı komut dosyalarını dinamik olarak eklemek ve paralel yüklemelere izin vererek engellemeyi önlemektir.

Bunu yapmanın birçok yolu var, tercih ettiğim bu.

<script type="text/javascript">
    function AttachScript(src) {
        window._sf_endpt=(new Date()).getTime();
        var script = document.createElement("script");
        document.getElementsByTagName("body")[0].appendChild(script);
        script.src = src;
    }
    AttachScript("/js/scripts.js");
    AttachScript("http://www.google-analytics.com/ga.js");
</script>

Bunu, kapanış gövdesi etiketinin hemen önüne yerleştirin ve her js dosyasını yüklemek için AttachScript kullanın.
Burada biraz daha bilgi var http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

7

Google’ın Analytics’i nasıl yüklediğine de bakmak isteyebilirsiniz:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.Push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.Push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

"En iyi uygulama" türünde bir komut dosyası olarak kabul edilir:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

7
Jeff Atwood

Birkaç Google millet Velocity 2010'da yeni bir açık kaynaklı proje duyurd denir Dağıtılabilir . Diffable, yeni bir sürüm çıktığında tamamen yeni bir dosya göndermek yerine, kullanıcının önbelleğinde depolanan sürümden bu yana değişen JS, HTML ve CSS bölümlerini aşamalı olarak yayınlamak için bazı sihirleri gerçekleştirir.

Bu teknik delicesine havalı ve küçük sık kod değişiklikleriyle büyük bir JavaScript kod tabanı kullandığınız web sitelerinde en etkili (ve çabaya değer). Bu özellikle Google Haritalar gibi uygulamalar için en az her Salı günü bir sürüm yayınlanıyor olan ve yılda ortalama 100 yeni sürüm alan ortalamalar için geçerlidir. Ayrıca, HTML5 yerel depolaması daha yaygın hale geldiğinde, genel olarak çok şey ifade eder.

BTW, Google’ın Michael Jones’un değişim hakkında konuştuğunu görmediyseniz (coğrafi bir bağlamda), onun tamamını izlemeye değer - GeoWeb 2009’da açılış konuşması .

3
JasonBirch

Bu soruya güncelleme yapmak. Modern olarak, engellemesiz yükleme yapmanın artık gerekli olmadığını düşünüyorum, tarayıcı sizin için yapacak.

StackOverflow'a bir soru ekledim, içeriği buraya aswel ekleyeceğim.

Tek fark, load olayının biraz daha erken kovulacak olması, ancak dosyaların yüklenmesinin aynı kalmasıdır. Ayrıca, aşırı yük bile engelleyici olmayan komut dosyasıyla daha erken ateşlese bile, bu JS dosyalarının daha önce kovulduğu anlamına gelmediğini de eklemek isterim. Benim durumumda normal kurulum en iyi şekilde gerçekleşti

Şimdi önce senaryolar, şuna benziyorlar:

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles burada sadece tüm dosyalar için tüm URL'leri tutan bir nesnedir.

3 test yaptım, işte sonuçlar:

Normal kurulum

Page load with css in the head and javascript at the bottom

Bu sadece normal kurulum, kafamızda 4 css ve sayfanın altında 3 css dosyamız var.

Şimdi engelleyen hiçbir şey görmüyorum. Görüyorum ki her şey aynı anda yükleniyor.

Engellenmeyen JS

Page load with non-blocking javascript

Şimdi bunu biraz daha ileri götürmek için SADECE js dosyalarını bloke etmeden yaptım. Bu yukarıdaki betiği ile. Birden bire css dosyalarımın yükü engellediğini görüyorum. Bu garip, çünkü ilk örnekte hiçbir şeyi engellemiyor. css neden birdenbire yükü engelliyor?

Her şey engellenmeyen

Page load with everything non-blocking

Sonunda, tüm harici dosyaların engellenmeyen bir şekilde yüklendiği bir test yaptım. Şimdi ilk yöntemimizle hiçbir fark görmüyorum. Sadece ikisi de aynı görünüyor.

Sonuç

Sonuç olarak, dosyalar zaten engellenmeyen bir şekilde yüklenmiştir, özel bir komut dosyası eklemek için bir ihtiyaç görmüyorum.

Yoksa burada bir şey mi özlüyorum?

Daha:

1
Saif Bechan