Home > Pozycjonowanie > Optymalizacja kodu JavaScript

Optymalizacja kodu JavaScript

Sierpień 8th, 2010

W ostatnich latach ilość kodu Javascript na stronach WWW wzrosła. Wynika to stąd, że witryny stają się coraz bardziej interaktywne. Więcej jest animacji, przesyłanie danych na stronie odbywa się bez przeładowania dzięki wykorzystaniu technologii Ajax. Często się zdarza, że zastosowanie na stronie takich elementów jak galeria zdjęć, rotator banerów, czy animowane menu wiąże się z dodaniem na stronę jednego bądź więcej plików Javascript. W przypadku kodu Javascript (listing poniżej) należy postępować bardzo podobnie jak w przypadku kodu CSS.

Jeśli w kodzie HTML strony znajduje się kod Javascript to należy go przenieść do zewnętrznego pliku. W kodzie strony HTML należy umieścić łącze do pliku Javascript:

W przeciwieństwie do łączy do plików CSS, łącza do plików Javascript należy umieszczać przed końcem znacznika body, a nie przed końcem znacznika head tak jak w wypadku łączy CSS. Cały kodu Javascript, z którego korzysta strona WWW najlepiej jest umieścić tylko w jednym pliku tak, aby zminimalizować liczbę żądań do serwera. Dobrą praktyką jest utrzymywanie dwóch wersji pliku Javascript: jednej bez kompresji i jednej skompresowanej. Wersję skompresowaną można otrzymać poprzez skorzystanie z narzędzi do kompresji kodu Javascript dostępnych online. Narzędzia te potrafią uzyskać stopień kompresji rzędu nawet 80%. Zasada działania tych programów jest stosunkowo prosta. Usuwają one komentarze (czyli tekst zawarty pomiędzy /* a */ lub po //). Likwidują białe znaki, czyli spacje oraz znaki nowej linii. Zastępują długie nazwy zmiennych krótszymi, na przykład jednoliterowymi. Mapują nazwy obiektów wbudowanych na krótsze, np. nazwę „document” zastępują krótszym „d”, nazwę „window” zastępują przez „w” itd. Programy te usuwają nieużywany kod, np. funkcje do których nie ma żadnych odwołań w kodzie, a także kod, który jest zbędny, np. wyrażenie:

if(zmienna==true)

można zastąpić przez:

if(zmienna)

Przykładowy kod Javascript (listing poniżej) zajmuje 915 bitów.

Dzięki narzędziu kompresującemu kod Javascript, skompresowany kod (listing poniżej) zajmuje 616 bitów. To jest mniej o prawie 33%. Stopień kompresji jest tym większy im dłuższy jest kod Javascript.