Sprawdzone metody dotyczące szybszej aplikacji internetowej za pomocą HTML5

Paul Irish

Wprowadzenie

Celem HTML5 jest zapewnienie obsługi komponentów i technik, które do tej pory udało nam się uzyskać dzięki bibliotekom JavaScript, w przeglądarkach natywnych. Dzięki tym funkcjom użytkownicy mogą korzystać z usług znacznie szybciej. W tym samouczku nie będę powtarzać informacji o wysokiej skuteczności, które znajdziesz w witrynie Exceptional Performance firmy Yahoo lub w dokumentach dotyczących szybkości strony i na stronie Let's make the web faster. Zamiast tego skupię się na tym, jak korzystanie z HTML5 i CSS3 może zwiększyć responsywność Twoich aplikacji internetowych.

Wskazówka 1. Zamiast plików cookie używaj pamięci internetowej

Chociaż pliki cookie są od lat używane do śledzenia unikalnych danych użytkowników, mają poważne wady. Największym błędem jest to, że wszystkie dane z plików cookie są dodawane do każdego nagłówka żądania HTTP. Może to mieć wymierny wpływ na czas odpowiedzi, zwłaszcza w przypadku żądań XHR. Dlatego sprawdzoną metodą jest zmniejszanie rozmiaru plików cookie. W HTML5 możemy uzyskać lepsze wyniki: zamiast plików cookie używaj wartości sessionStorage i localStorage.

Te 2 obiekty pamięci internetowej mogą służyć do przechowywania danych użytkownika po stronie klienta przez czas trwania sesji lub bezterminowo. Ich dane nie są też przesyłane na serwer za pomocą każdego żądania HTTP. Oferuje on interfejs API, który sprawi, że chętnie pozbędziesz się plików cookie. Oto oba interfejsy API, które używają plików cookie jako zastępczego sposobu działania.

// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {

  // easy object property API
  localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

} else {

  // without sessionStorage we'll have to use a far-future cookie
  //   with document.cookie's awkward API :(
  var date = new Date();
  date.setTime(date.getTime()+(365*24*60*60*1000));
  var expires = date.toGMTString();
  var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                  ' expires='+expires+'; path=/';
  document.cookie = cookiestr;
}

Wskazówka 2. Użyj przejść CSS zamiast animacji JavaScript

Przejścia CSS zapewniają atrakcyjne wizualnie przejście między dwoma stanami. Większość właściwości stylu można zmieniać, np. cieniować tekst, zmieniać jego położenie, tło lub kolor. Możesz używać przejść do stanów pseudoselektorów, takich jak :hover lub :invalid i :valid (przykład z stanami walidacji formularza). Są one jednak znacznie bardziej zaawansowane i mogą być uruchamiane po dodaniu dowolnej klasy do elementu.

div.box {
  left: 40px;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }

Dodając przełączniki klas totheleft i totheright, możesz przesuwać pole. Porównaj tę ilość kodu z biblioteką animacji JavaScript. Jak widać, liczba bajtów wysyłanych do przeglądarki jest znacznie mniejsza, gdy używasz animacji opartej na CSS. Dodatkowo dzięki akceleracji na poziomie GPU przejścia wizualne będą jak najbardziej płynne.

Wskazówka 3. Używaj baz danych po stronie klienta zamiast wielokrotnych połączeń z serwerem

Web SQL Database i IndexedDB wprowadzają bazy danych po stronie klienta. Zamiast zwykłego przesyłania danych na serwer za pomocą XMLHttpRequest lub przesłania formularza możesz korzystać z baz danych po stronie klienta. Zmniejszenie liczby żądań HTTP jest głównym celem wszystkich inżynierów zajmujących się wydajnością, więc korzystanie z nich jako bazy danych może zaoszczędzić wiele połączeń za pomocą XHR lub przesyłanych do serwera wiadomości w formie postu. W niektórych przypadkach, np. podczas rejestrowania postępu przesyłania formularza, można użyć interfejsów localStorage i sessionStorage, które są znacznie szybsze niż interfejsy bazy danych po stronie klienta. Jeśli na przykład masz komponent siatki danych lub skrzynkę odbiorczą z setkami wiadomości, przechowywanie danych lokalnie w bazie danych pozwoli Ci zaoszczędzić na połączeniach HTTP, gdy użytkownik będzie chciał przeszukiwać, filtrować lub sortować dane. Lista znajomych lub autouzupełnianie tekstu można filtrować po każdym naciśnięciu klawisza, co znacznie zwiększa wygodę użytkowania.

Wskazówka 4. Ulepszenia JavaScriptu przynoszą znaczne korzyści w zakresie wydajności

W JavaScript 1.6 do prototypu tablicy dodano wiele dodatkowych metod. Są one dostępne w większości przeglądarek, z wyjątkiem Internet Explorera. Na przykład:

// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]

// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
  var linksList = document.querySelector('#links');
  var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
  linksList.innerHTML +=  newLink;
});


// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
  return number < 2;
});
// [1.618]


// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
  localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});

W większości przypadków korzystanie z tych metod natywnych zapewnia znacznie większą szybkość niż zwykły for: for (var i = 0, len = arr.length; i < len; i++). Natywna analiza JSON (za pomocą JSON.parse()) zastępuje plik json2.js, który był do tej pory używany. Natywna obsługa formatu JSON jest znacznie szybsza i bezpieczniejsza niż korzystanie z zewnętrznego skryptu. Jest już dostępna w IE8, Operze 10.50, Firefoksie 3.5, Safari 4.0.3 i Chrome. Natywne String.trim to kolejny przykład funkcji, która jest nie tylko szybsza od odpowiedników w języku JS, ale też potencjalnie bardziej poprawna. Żadne z tych dodatków do JavaScriptu nie są technicznie HTML5, ale należą do grupy technologii, które są dostępne od niedawna.

Wskazówka 5. Używaj pliku manifestu pamięci podręcznej w przypadku witryn na żywo, a nie tylko aplikacji offline

Dwa lata temu WordPress użył Google Gears, aby dodać funkcję Wordpress Turbo. W istocie, wiele zasobów używanych w panelu administracyjnym zostało zapisanych lokalnie w pamięci podręcznej, co przyspieszyło dostęp do plików. Możemy odtworzyć to zachowanie za pomocą pamięci aplikacji HTML5 i elementu cache.manifest. Pamięć podręczna aplikacji ma niewielką przewagę nad ustawianiem nagłówków Expires. Ponieważ tworzysz plik deklaratywny wskazujący zasoby statyczne, które można zapisać w pamięci podręcznej, przeglądarki mogą to znacznie zoptymalizować, a nawet zapisać zasoby w pamięci podręcznej z wyprzedzeniem. Za podstawę możesz użyć podstawowej struktury witryny. Masz dane, które mogą się zmieniać, ale kod HTML wokół nich zwykle pozostaje dość spójny. Dzięki pamięci podręcznej aplikacji możesz traktować kod HTML jako serię czystych szablonów, przechowywać znaczniki za pomocą pliku cache.manifest, a potem przesyłać dane JSON przez sieć, aby aktualizować treści. Ten model jest bardzo podobny do tego, jak działają natywne aplikacje do czytania wiadomości na iPhone’a i Androida.

Wskazówka 6. Włącz akcelerację sprzętową, aby poprawić jakość obrazu

W popularnych przeglądarkach wiele operacji wizualnych może korzystać z przyspieszania na poziomie karty graficznej, co może znacznie usprawnić bardzo dynamiczne operacje wizualne. Akceleracja sprzętowa została zapowiedziana w Firefox Minefield i IE9, a Safari wprowadziła akcelerację na poziomie sprzętu w wersji 5. (W Safari na urządzeniach mobilnych pojawiła się znacznie wcześniej). W Chromium właśnie dodano transformacje 3D i akcelerację sprzętową w systemie Windows. Wkrótce pojawią się one na pozostałych platformach.

Przyspieszenie GPU włącza się tylko w bardzo ograniczonych warunkach, ale transformacje 3D i animowana przezroczystość są najczęstszym powodem włączenia przyspieszenia. Aby włączyć tę funkcję, możesz użyć nieco nietypowego, ale nieinwazyjnego sposobu:

.hwaccel {  -webkit-transform: translateZ(0); }

Nie ma jednak gwarancji. :) Jeśli akceleracja sprzętowa jest obsługiwana i włączona, animacja przesunięcia, obrotu, skali i przezroczystości będzie płynniejsza dzięki składaniu za pomocą procesora graficznego. Ich zaletą jest to, że są obsługiwane bezpośrednio na karcie graficznej i nie wymagają ponownego rysowania zawartości warstwy. Jednak każda usługa, która wpływa na układ strony, będzie nadal względnie powolna.

Wskazówka 7. W przypadku operacji obciążających procesor użyj Web Workers

Web Workers mają 2 istotne zalety: 1) są szybkie. 2) Podczas wykonywania zadań przeglądarka pozostaje responsywna. Zapoznaj się z prezentacją multimedialną HTML5 dotyczącą Workers. Oto kilka sytuacji, w których możesz użyć Web Workers:

• Formatowanie tekstu długiego dokumentu
• Podświetlanie składni
• Przetwarzam obraz
• synteza obrazu,
• Przetwarzanie dużych tablic

Wskazówka 8. Atrybuty i typy pól formularza HTML5

HTML5 wprowadza nowy zestaw typów danych, rozszerzając zestaw text, password i file o wartości search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range i color. Obsługa tych funkcji w przeglądarkach jest różna, a obecnie najwięcej funkcji obsługuje przeglądarka Opera. Dzięki wykrywaniu funkcji możesz określić, czy przeglądarka obsługuje funkcje natywnych (czy oferuje interfejs użytkownika, np. datownik czy selektor kolorów). Jeśli nie, możesz nadal używać widżetów JS do wykonywania tych typowych zadań. Oprócz typów dodaliśmy do naszych normalnych pól wejściowych kilka przydatnych funkcji. Pole tekstowe placeholder zawiera domyślny tekst, który znika po kliknięciu, a pole autofocus ustawia kursor na stronie wczytywania, dzięki czemu możesz od razu zacząć korzystać z tego pola. Walidacja danych wejściowych to kolejna funkcja, która pojawia się w HTML5. Dodanie atrybutu required oznacza, że przeglądarka nie pozwoli przesłać formularza, dopóki to pole nie zostanie wypełnione. Atrybut pattern umożliwia też określenie niestandardowego wyrażenia regularnego, z którym porównywane są dane wejściowe. Nieprawidłowe wartości uniemożliwiają przesłanie formularza. Ta deklaratywna składnia to ogromna poprawa nie tylko w zakresie czytelności kodu źródłowego, ale też znaczne ograniczenie ilości potrzebnego kodu JavaScript. Jeśli nie ma natywnej obsługi tych funkcji, możesz użyć wykrywania funkcji, aby zastosować rozwiązanie zastępcze. Korzystanie z domyślnych widżetów oznacza, że nie musisz wysyłać dużych ilości kodu JavaScript i CSS potrzebnych do wyświetlenia tych widżetów, co przyspiesza wczytywanie strony i prawdopodobnie poprawia responsywność widżetów. Aby wypróbować niektóre z tych ulepszeń, zapoznaj się z prezentacją HTML5.

Wskazówka 9. Zamiast żądać ciężkich sprite'ów obrazów, używaj efektów CSS3

CSS3 oferuje wiele nowych możliwości stylizacji, które zastępują używanie obrazów do dokładnego odzwierciedlenia projektu wizualnego. Zastąpienie obrazu 2 KB 100 bajtami kodu CSS to ogromna korzyść, nie wspominając już o tym, że udało Ci się usunąć kolejne żądanie HTTP. Oto kilka właściwości, które warto poznać:

• Gradienty liniowe i promieniowe
• Border-radius dla zaokrąglonych rogów
• Cień dla cieni i poświaty
• RGBA dla zanikania alfa
• Transformacje dla rotacji
• Maski CSS

Możesz na przykład tworzyć bardzo dopracowane przyciski za pomocą gradientów i odtwarzać wiele innych efektów bez obrazów. Większość z nich jest dobrze obsługiwana przez przeglądarki. Możesz też użyć biblioteki takiej jak Modernizr, aby wykrywać przeglądarki, które nie obsługują tych funkcji, i zastępować je obrazami.

Wskazówka 10. Używaj protokołu WebSockets, aby szybciej dostarczać treści przy mniejszym wykorzystaniu przepustowości niż w przypadku XHR

WebSockets zostały zaprojektowane w odpowiedzi na rosnącą popularność Comet. Korzystanie z protokołu WebSocket ma obecnie pewne zalety w porównaniu z modelem Comet over XHR.

Protokół WebSockets ma bardzo lekkie ramki, więc zużywa często mniej przepustowości niż XHR. Według niektórych raportów zmniejszenie liczby bajtów przesyłanych przez sieć wynosi 35%. Ponadto przy większym wolumenie różnica w wydajności dotycząca dostarczania wiadomości jest bardziej widoczna. W tym teście czas przetwarzania XHR był dłuższy o 3500% niż w przypadku WebSockets. Na koniec Ericsson Labs przeanalizował wydajność WebSockets i stwierdził, że czas pingowania w przypadku HTTP jest 3–5 razy dłuższy niż w przypadku WebSockets ze względu na większe wymagania przetwarzania. Doszliśmy do wniosku, że protokół WebSocket jest znacznie bardziej odpowiedni do aplikacji działających w czasie rzeczywistym.

Dodatkowe materiały

Aby uzyskać rekomendacje dotyczące pomiarów i wydajności, warto korzystać z rozszerzeń do Firefoksa Page Speed i YSlow. Dodatkowo Speed Tracer w Chrome i DynaTrace Ajax w IE zapewniają bardziej szczegółowe rejestrowanie analizy.