Niedawno pokazałem, jak z wykorzystaniem JSMina sprawić, aby pobierane pliki JS były mniejsze. W tym wpisie pokażę, co zrobić, aby ograniczyć liczbę requestów HTTP przy ładowaniu plików JS.

Powolne ładowanie strony

Aby strona ładowała się szybciej, można zrobić dwie rzeczy:

  1. Zmniejszyć jej rozmiar – im mniej KB do pobrania, tym szybciej się to stanie.
  2. Zmniejszyć liczbę odwołań do serwera. Jedno odwołanie żądające 100KB będzie działać szybciej niż 10 żądań po pliki 10KB każdy.

W przypadku JS punkt pierwszy można rozwiązać albo pisząc krótsze skrypty (lub rezygnując z nich), albo zmniejszając rozmiar kodu wynikowego.

Continue reading

Szukając pomysłu na odpowiednie rozwiązanie zdarza się zajrzeć do cudzego kodu – na co z resztą przeważnie pozwala licencja.

Niestety, dla developera, kod JS często poddawany jest zabiegowi kompresji, przez co staje się bardzo nieczytelny. Z kolei odkodowywanie pliku zawierającego kilka tysięcy linii kodu nie jest niczym najprzyjemniejszym.

Skoro jednak automat umiał skompresować kod, to i automat powinien umieć sformatować kod ponownie do czytelnej dla człowieka wersji.

Oto ciekawe narzędzie online potrafiące szybko “uczytelnić” skompresowany kod:

Continue reading

Co zrobić, aby strona ładowała się szybciej? Sprawić, aby zajmowała mniej miejsca. Wydaje się oczywiste, a jednak bardzo wielu webdeveloperów [w tym często ja sam] ładuje internaucie pliki JS zawierające tonę komentarzy, spacji, enterów i innych białych znaków.

Dodatkowym problem jest nie tyle rozmiar strony, co mnogość requestów do serwera. 30 requestów, a każdy plik ma po 1kB danych. Jak to zmienić? W tym artykule zajmę się zmniejszeniem rozmiaru plików JS.

Continue reading

Shrinksafe jest aplikacją napisaną w Javie [o otwartych źródłach], dzięki której można zmniejszyć rozmiar plików JS wysyłanych do przeglądarki.

Jak to działa?

Javascript jest językiem parsowanym po stronie przeglądarki. Kod:

var nazwaZmiennejBardzoDluga                =                     1; // komentarz sialalalala
alert(nazwaZmiennejBardzoDluga);

w wyniku nie różni się niczym od takiego kodu:

var a=1;alert(a)

Oba wyświetlą w wyniku alert z komunikatem “1”.Continue reading

JavaScript jest językiem skryptowym. Zamiast kompilacji, podczas której kompilator może [i najczęściej to robi] dokonać optymalizacji, w JS istnieje jedynie interpretacja [w trakcie wykonania]. Powoduje to, że o ile nazwanie zmiennej

var obiekOdpowiedzialnyZaFunkcjonalnośćABC; // tu komentarz

w normalnych przypadkach uznalibyśmy za coś poprawnego, to w JS jest dobre tylko na czas prac deweloperskich. Później spowalnia naszą stronę. Zobaczmy wady i zalety.

Zalety:

  • kod jest samokomentujący. Nazwa zmiennej mówi do czego ma być używana
  • komentarz dodatkowo może tłumaczyć zawiłości lub dziwne przypadki

Continue reading