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

Odpowiedzi:

14

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.

Gareth Farrington
źródło
1
Yahoo dystrybuuje również wtyczkę YSlow dla Firefoksa, która analizuje twoją stronę pod kątem najlepszych praktyk wymienionych powyżej i daje ci kartę raportu. Zobacz developer.yahoo.com/yslow
Alan
1
Istnieją również techniki, takie jak ładowanie asynchroniczne, z których można korzystać, jeśli masz elementy witryny, które nie wymagają ładowania skryptu podczas początkowego wyświetlania strony. Zarówno to, jak i umieszczenie skryptu w dolnej części strony mają ograniczenia; w niektórych przypadkach musisz załadować JS do głowicy dokumentu.
JasonBirch
7

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/

Dezintegrator
źródło
1
Hej, ukradłeś CDNing; to powinno oznaczać zrobienie czegoś kanadyjskiego! ;)
JasonBirch
jajajaja good one
The Disintegrator
7

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/

Jeff Atwood
źródło
3

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 .

JasonBirch
źródło
1

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

Strona ładuje się z css w nagłówku i javascript na dole

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

Ładowanie strony z nieblokującym javascript

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

Ładowanie strony ze wszystkim, co 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:

Saif Bechan
źródło
Różnica polega na lokalizacji niebieskiej linii, którą, jak sądzę, jest to, kiedy strona zaczyna się renderować. Z punktu widzenia użytkownika końcowego dzieje się to wtedy, gdy strona jest „ładowana”, ponieważ wtedy zaczynają widzieć rzeczy. W pierwszym przykładzie renderowanie rozpoczyna się po załadowaniu ostatniego pliku JS, przy znaku 900ms. W drugim przypadku następuje załadowanie arkuszy stylów (~ 700 ms). Po trzecie, po pobraniu HTML (~ 500ms). Nadal wybrałbym drugie podejście, ponieważ tak naprawdę nie chcesz ładować CSS po renderowaniu strony.
Tim Fountain