Performansı optimize etmek için bir sayfaya Javascript yüklemenin en iyi yolu nedir?

Daha hızlı yüklenmesini sağlayacak bir sayfaya JavaScriptimi yüklemenin bir yolu var mı?

Yapabileceğiniz birkaç şey var:

1. HTML ve CSS'yi javascriptten önce yükleyin. Bu, tarayıcıya sayfayı düzenlemek 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ını kapanış gövdesi etiketine olabildiğince yakın yerleştirin.

2. Bir CDN kullanmayı düşünün. JQuery gibi popüler kitaplıklardan herhangi birini kullanıyorsanız, birçok şirket (örn. Google, yahoo) kitaplıkları yüklemek için kullanabileceğiniz ücretsiz CDN'ler kullanır.

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

4. Web sunucusunda zip sıkıştırmayı açın.

Yahoo, sayfa yükleme sürelerini azaltmaya yardımcı olabilecek harika bir öneri sayfasına sahiptir .

Minifing, gziping ve CDNing'in yanı sıra (yeni kelime?). Erteleme yüklemesini düşünmelisiniz. Temel olarak bunun yaptığı, komut dosyalarını dinamik olarak eklemek ve engellemeyi önlemek ve paralel indirmelere izin vermektir.

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

<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.
Biraz daha bilgi burada http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

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 edildiğinden:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

Birkaç Google üyesi , Velocity 2010'da Diffable adlı yeni bir açık kaynak projesi duyurdu . Diffable, yeni bir sürüm yayınlandığı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 kademeli olarak yayınlamak için biraz sihir yapar.

Bu teknik delicesine harika ve şu anda en sık kullanılan ve küçü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 her salı en az bir sürümden geçen ve yılda ortalama 100 yeni sürümün olduğu Google Haritalar gibi uygulamalar için geçerlidir . Ayrıca, HTML5 yerel depolaması daha yaygın hale geldiğinde genel olarak çok mantıklıdır.

BTW, Google'ın Michael Jones'un değişiklik hakkında konuştuğunu görmediyseniz (coğrafi bir bağlamda) GeoWeb 2009'daki tüm açılış konuşmasını izlemeye değer .

Bu soruyu güncellemek için. Modern olarak, engellemeyen yüklemenin artık gerekli olmadığını düşünüyorum, tarayıcı bunu sizin için yapacak.

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

Tek fark, load olayının biraz daha erken tetiklenmesidir, ancak dosyaların yüklenmesi aynı kalır. Ayrıca, onload engelleme yapmayan komut dosyasıyla daha erken çalışsa bile, bu JS dosyalarının daha önce tetiklendiği anlamına gelmediğini eklemek istiyorum. Benim durumumda normal kurulum en iyi çıktı

Şimdi önce senaryolar şöyle görünür:

<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 tüm dosyalar için tüm URL'leri tutan bir nesne.

3 testi çalıştırdım, işte sonuçlar:

Normal kurulum

Bu sadece normal kurulum, başımızda 4 css dosyası ve sayfanın altında 3 css dosyası var.

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

Engellemeyen JS

Şimdi bu biraz daha ileri almak için, SADECE js dosyaları engelleme yaptık. Bu yukarıdaki komut dosyası ile. Aniden css dosyalarımın yükü engellediğini görüyorum. Bu garip, çünkü ilk örnekte hiçbir şeyi engellemiyor. Css neden aniden yükü engelliyor?

Her şey engellemiyor

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

Sonuç

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

Yoksa burada bir şey mi kaçırıyorum?

Daha:

• Makale: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
• Soru: /programming/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body
• Soru: /programming/5765113/do-modern-browsers-still-limit-parallel-downloads
• Kodu: http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
• Kodu: http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/