Jaki jest najlepszy sposób załadowania Javascript na stronę, aby zoptymalizować wydajność?

Czy istnieje sposób, aby załadować mój JavaScript na stronę, która przyspieszy ładowanie?

Jest kilka rzeczy, które możesz zrobić:

1. Załaduj HTML i CSS przed javascript. To daje przeglądarce wszystko, czego potrzebuje, aby ułożyć stronę i ją renderować. Daje to użytkownikowi wrażenie, że strona jest zgryźliwa. Umieść znaczniki skryptu lub bloki jak najbliżej zamykającego znacznika treści.

2. Rozważ użycie CDN. Jeśli korzystasz z jednej z popularnych bibliotek, takich jak JQuery, wiele firm (np. Google, yahoo) obsługuje bezpłatne sieci CDN, których możesz użyć do załadowania bibliotek.

3. Załaduj kod z zewnętrznego pliku zamiast osadzonego skryptu. Daje to przeglądarce możliwość buforowania zawartości JS i wcale nie trzeba jej ładować. Kolejne ładowanie stron będzie szybsze.

4. Włącz kompresję zip na serwerze WWW.

Yahoo ma świetną stronę z sugestiami, które mogą pomóc skrócić czas ładowania strony.

Oprócz Minifing, gziping i CDNing (nowe słowo?). Należy rozważyć odłożenie ładowania. Zasadniczo powoduje to dynamiczne dodawanie skryptów i zapobieganie blokowaniu, umożliwiając równoległe pobieranie.

Jest wiele sposobów na zrobienie tego, ten właśnie preferuję

<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>

Umieść to tuż przed zamykającym znacznikiem body i użyj AttachScript, aby załadować każdy plik js.
Więcej informacji tutaj http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

Możesz także przyjrzeć się, w jaki sposób Google ładuje Analytics:

<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>

Ponieważ jest to skrypt uważany za „najlepszą praktykę”:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

Kilku ludzi z Google ogłosiło nowy projekt open source na Velocity 2010 o nazwie Diffable . Diffable wykonuje pewną magię, aby stopniowo publikować tylko fragmenty JS, HTML i CSS, które zmieniły się od czasu wersji przechowywanej w pamięci podręcznej użytkownika, zamiast wysyłać cały nowy plik po wydaniu nowej wersji.

Ta technika jest niesamowicie fajna i jest obecnie najbardziej skuteczna (i warta wysiłku) na stronach internetowych, na których używasz dużej bazy kodu JavaScript z niewielkimi częstymi zmianami kodu. Dotyczy to szczególnie aplikacji takich jak Google Maps, które są wydawane co najmniej raz w każdy wtorek i średnio około 100 nowych wersji rocznie. Ma to również sens, gdy lokalna pamięć HTML5 stanie się bardziej rozpowszechniona.

BTW, jeśli nie widziałeś Michaela Jonesa z Google mówiącego o zmianie (w kontekście geoprzestrzennym), warto obejrzeć cały jego komentarz na GeoWeb 2009 .

Aby zaktualizować to pytanie. Myślę, że w dzisiejszych czasach sposób nieblokującego ładowania nie jest już potrzebny, przeglądarka zrobi to za Ciebie.

Dodałem pytanie do StackOverflow, dodam tutaj treść aswel.

Jedyną różnicą jest to, że zdarzenie ładowania zostanie uruchomione nieco wcześniej, ale ładowanie samych plików pozostaje takie samo. Chcę również dodać, że nawet jeśli obciążenie zostanie uruchomione wcześniej za pomocą nieblokującego skryptu, nie oznacza to, że pliki JS są uruchamiane wcześniej. W moim przypadku najlepsza była normalna konfiguracja

Teraz najpierw skrypty wyglądają tak:

<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 jest tu tylko obiekt, który przechowuje wszystkie adresy URL wszystkich plików.

Przeprowadziłem test 3, oto wyniki:

Normalna konfiguracja

To tylko normalna konfiguracja, mamy 4 pliki css w nagłówku i 3 pliki css u dołu strony.

Teraz nic nie blokuje. Widzę, że wszystko ładuje się w tym samym czasie.

Nieblokujący JS

Teraz, aby pójść trochę dalej, uczyniłem TYLKO pliki js nieblokujące. Z powyższym skryptem. Nagle widzę, że moje pliki css blokują ładowanie. Jest to dziwne, ponieważ w pierwszym przykładzie nie blokuje niczego. Dlaczego css nagle blokuje ładunek?

Wszystko nie blokuje

Wreszcie zrobiłem test, w którym wszystkie pliki zewnętrzne są ładowane w sposób nieblokujący. Teraz nie widzę żadnej różnicy w naszej pierwszej metodzie. Oboje wyglądają tak samo.

Wniosek

Doszedłem do wniosku, że pliki są już ładowane w sposób nieblokujący, nie widzę potrzeby dodawania specjalnego skryptu.

A może coś tu brakuje?

Więcej:

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