head.js - projektuj z głową
Każdy, kto kiedykolwiek korzystał z internetu doskonale zdaje sobie sprawę, że strony, które ładują się długo odstraszają potencjalnych odwiedzających. Wyszukany w Google link nie ładuje się w ciągu 5 sekund? Pewnie strona nie działa - wracamy na wyniki wyszukiwania i sprawdzamy kolejną.
Często za wolne ładowanie się strony nie odpowiada zły kod silnika na którym stoi, czy też wolne łącze serwera, ale duża ilość ładowanych skryptów JavaScript. W tym miejscu z pomocą przychodzi nam skrypt nazwany head.js. Za pomocą tego prostego skryptu możemy oddelegować ładowanie dziesiątek oddzielnych plików JS w tło i zmniejszyć czas, jaki upłynie do wyświetlenia zawartości strony. head.js ma też kilka innych, przydatnych funkcji, o których wspomnę jeszcze poniżej.
Podstawowa funkcjonalność - równoległe, nie blokujące pobieranie w tle.
Standardowe umieszczanie wywołania skryptów JS w sekcji
wiąże się z odczekaniem na pobranie wszystkich dołączonych plików przed rozpoczęciem renderowania strony. Jeżeli ładujemy jeden mały plik może nie stanowić to problemu, jednak kiedy chcemy korzystać z kilku bibliotek, skryptów pomocniczych i innych, które nie daj Bóg znajdują się na wolno odpowiadających serwerach sprawa nieco się komplikuje. Pomocne może być przesunięcie wywołań skryptów na sam koniec części jednak jest to rozwiązanie mało eleganckie i nie intuicyjne.head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js", "/assets/scripts.js", function() {
init();
});
Powyższy kod obrazuje podstawowe i chyba najczęstsze wykorzystanie head.js Wywołanie kodu spowoduje pobranie biblioteki jQuery z serwera GoogleAPI, wczytanie lokalnego pliku JS oraz wywołanie funkcji init kiedy tylko przeglądarka zgłosi zdarzenie DOM.ready (czyli załadowano HTML, ale nie pobrano elementów multimedialnych). Jak już wspominałem, pliki pobierane są w tle, jednak wykonywane w kolejności zdefiniowanej przez nas w wywołaniu. Jeżeli nie zależy nam na kolejności ich wykonywania, możemy zmodyfikować nasz kod:
head.js("/assets/scripts.js", function() {
init();
});
head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js");
// jest to równoznaczne z:
head.js("/assets/scripts.js", function() {init();}).js("http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js");
Teraz skrypty wykonane zostaną w kolejności, w której pobierze je przeglądarka.
Jeżeli nie chcemy używać "wywołań zwrotnych" (ang. callback) możemy także nadać każdemu skryptowi unikalny identyfikator i posłużyć się funkcją head.ready jak na poniższym przykładzie:
head.ready("tools", function() {
init();
});
head.js(
{jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"},
{tools: "/assets/scripts"}
);
Dodatkowe możliwości
Jak już wspomniałem, head.js poza swoim podstawowym zadaniem spełnia także kilka innych funkcji. Jak wiadomo starsze przeglądarki nie w pełni wspierają HTML5 - najbardziej uciążliwy jest brak możliwości używania CSS dla nowo wprowadzonych elementów. By obejść ten problem często używamy HTML5shiv - okazuje się jednak, że autor head.js postanowił umieścić te funkcjonalność w swoim skrypcie, więc nie musimy zawracać sobie tym głowy.
Kolejnym udogodnieniem, którym obdarza nas skrypt jest wykrywanie możliwości przeglądarki w zakresie obsługi CSS, podobnie jak ma to w wypadku zastosowania Modernizr. Samo dodanie wywołania skryptu do strony poskutkuje nadaniem elementowi <html> klas określających wsparcie dla poszczególnych elementów. Klasy, jakie może dodać skrypt to:
borderimage, borderradius, boxshadow, cssreflections, csstransforms, csstransitions, fontface, multiplebgs, opacity, rgba, textshadow
Poza wykrywaniem obsługi CSS skrypt pozwoli nam poznać także rodzinę (ie, webkit, opera, mozilla), wersję (tylko dla IE, lt-ie8, ie6), oraz szerokość okna, w którym wyświetlona jest strona dodając odpowiednie klasy z przedrostkiem w- (dla aktualnej rozdzielczości) i lt- (dla rozdzielczości większych od aktualnej). Przykładowo, oglądając stronę w przeglądarce IE7 i rozdzielczości 1400x768 element <html;> otrzyma klasy (pomijając wykrywanie CSS z powyższego akapitu):
<html class="ie ie7 lt-ie8 lt-ie9 w-1400 lt-1440 lt-1680 lt-1920">
Ostatnią funkcjonalnością jest tzw. "CSS routing" czyli dodawanie klasy na podstawie adresu URL. Najłatwiej zobrazować to na przykładzie. Odwiedzając adres
http://example.com/o-firmie/historia/rok-2011
Element <html;> przyjmie postać (dla uproszczenia, bez powyższych funkcjonalności):
<html class="o-firmie-section historia-section rok-2011-section">
Dzięki czemu możemy wpłynąć np. na zaakcentowanie graficzne aktualnie przeglądanej sekcji witryny (chociaż moim zdaniem zawsze lepiej zrobić to po stronie serwera dodając od razu klasy do odpowiednich elementów).
Podsumowując, head.js to doskonałe narzędzie, które poza zmniejszeniem czasu potrzebnego na załadowanie naszej strony oraz usprawnieniem organizacji kodu HTML posiada także dodatkowe, ułatwiające codzienną prace funkcje. Po więcej informacji nt. skryptu, jego możliwości oraz konfiguracji zapraszam na oficjalną stronę projektu.
