Wstęp
Znaczna część HTML5 ma na celu zapewnić bezpośrednią obsługę komponentów i technik, które udało nam się uzyskać do tej pory dzięki bibliotekom JavaScript. Dzięki temu użytkownicy będą mogli korzystać z tych funkcji znacznie szybciej. W tym samouczku nie powtórzę znakomitych wyników badania skuteczności przeprowadzonych w witrynie Yahoo! Unique Performance, narzędziu Page Speed lub Przyspieszmy internet. Zamiast tego skupię się na tym, jak dzięki wykorzystaniu HTML5 i CSS3 Twoje aplikacje internetowe mogą być bardziej responsywne.
Wskazówka 1. Zamiast plików cookie używaj miejsca na dane w internecie
Pliki cookie od lat są używane do śledzenia danych unikalnych użytkowników, ale mają poważne wady. Największą wadą jest to, że wszystkie dane 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 czasie XHR. Dlatego warto zmniejszyć rozmiar pliku cookie. W HTML5 możemy to zrobić lepiej: zamiast plików cookie użyj elementów sessionStorage i localStorage.
Te 2 obiekty pamięci internetowej mogą przechowywać dane użytkownika po stronie klienta przez czas trwania sesji lub w nieskończoność. Poza tym dane nie są przesyłane na serwer w ramach każdego żądania HTTP. Mają interfejs API, który pozwoli Ci wyeliminować pliki cookie. Oto oba interfejsy API wykorzystujące pliki cookie w zastępstwie.
// 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 umożliwiają atrakcyjne wizualnie przejście między 2 stanami. Większość właściwości stylu można przenieść, np. modyfikując cień, pozycję, tło lub kolor. Możesz używać przejść do stanów pseudoselektorów, np. :hover, lub z formularzy HTML5 do :invalid i :valid (przykład ze stanami weryfikacji formularza). Są one jednak znacznie bardziej wydajne i można je uruchamiać, gdy dodasz do elementu dowolną klasę.
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; }
Dodanie przełącznika klas totheleft i totheright pozwala przesuwać pole. Porównaj tę ilość kodu z biblioteką animacji JavaScript. Jest to jasne, że w przypadku animacji opartych na CSS liczba bajtów wysyłanych do przeglądarki jest znacznie mniejsza. Dodatkowo dzięki akceleracji na poziomie GPU te przejścia wizualne są możliwie płynne.
Wskazówka 3. Używaj baz danych po stronie klienta zamiast sesji wymiany danych po stronie serwera
Web SQL Database i IndexedDB wprowadzają bazy danych po stronie klienta. Zamiast standardowego wzorca publikowania danych na serwerze za pomocą XMLHttpRequest lub przesyłania formularzy możesz korzystać z tych baz danych po stronie klienta. Zmniejszenie liczby żądań HTTP jest głównym celem wszystkich inżynierów zajmujących się wydajnością, więc wykorzystanie ich jako magazynu danych może zaoszczędzić wiele wizyt za pomocą XHR lub przesyłania formularzy z powrotem na serwer. W niektórych przypadkach można używać metod localStorage i sessionStorage, na przykład do rejestrowania postępu przesyłania formularza, i są znacznie szybsze niż interfejsy API baz 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 pozwala uniknąć przesyłania danych w obie strony za każdym razem, gdy użytkownik chce wyszukiwać, filtrować lub sortować dane. Po każdym naciśnięciu klawisza można odfiltrować listę znajomych lub dane autouzupełniania, aby zapewnić użytkownikom lepsze wrażenia.
Wskazówka 4. Ulepszenia JavaScriptu mają korzystny wpływ na wydajność
Wiele dodatkowych metod zostało dodanych do protokołu tablicy w języku JavaScript 1.6. Funkcje te są obecnie dostępne w większości przeglądarek, z wyjątkiem IE. 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 użycie tych metod natywnych zapewnia znacznie większą szybkość niż w przypadku typowych pętli takich jak: for (var i = 0, len = arr.length; i < len; i++).
Natywne analizowanie danych JSON (za pomocą JSON.parse()) zastępuje plik json2.js, którego używamy od jakiegoś czasu. Natywny format JSON jest znacznie szybszy i bezpieczniejszy niż korzystanie ze skryptu zewnętrznego. Jest już dostępny w przeglądarkach IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3 i Chrome.
Natywna String.trim to kolejny dobry przykład tego, że jest nie tylko szybszy niż długoterminowe odpowiedniki w języku JS, ale może też być bardziej poprawny. Żadne z tych dodatków JavaScript nie jest w rozumieniu języka HTML5, ale należą do kategorii technologii, które zostały ostatnio udostępnione.
Wskazówka 5. Używaj pliku manifestu pamięci podręcznej w przypadku aktywnych witryn, a nie tylko aplikacji offline
Dwa lata temu witryna Wordpress użyła wtyczki Google Gears, aby dodać funkcję o nazwie Wordpress Turbo. Zasadniczo dużo zasobów używanych w panelu administracyjnym był przechowywany lokalnie w pamięci podręcznej, co przyspiesza dostęp do plików. Można to powtórzyć za pomocą pamięci podręcznej aplikacji HTML5 i interfejsu cache.manifest.
Pamięć podręczna aplikacji ma drobną przewagę nad ustawieniem nagłówków Expires. Jeśli tworzysz plik deklaratywny wskazujący zasoby statyczne, które mogą być zapisywane w pamięci podręcznej, przeglądarki mogą tak intensywnie je optymalizować, być może nawet wyprzedzając je przed użyciem.
Przeanalizuj podstawową strukturę witryny jako szablon. Twoje dane mogą się zmieniać, ale otaczający je kod HTML jest zazwyczaj dość spójny. Dzięki pamięci podręcznej aplikacji można potraktować kod HTML jako serię czystych szablonów, zapisywać znaczniki w pamięci podręcznej za pomocą pliku cache.manifestu, a następnie dostarczać za pomocą metody JSON plik JSON, aby aktualizować zawartość. Ten model jest bardzo podobny do działania natywnej aplikacji z wiadomościami na iPhone'a lub Androida.
Wskazówka 6. Włącz akcelerację sprzętową, aby poprawić wrażenia wizualne
W czołowych przeglądarkach wiele operacji wizualnych może korzystać z akceleracji na poziomie GPU, co znacznie usprawnia dynamiczne operacje wizualne. W przeglądarkach Firefox Minefield i IE9 oraz Safari w wersji 5 wprowadzono akcelerację sprzętową. Pojawiła się w mobilnej wersji Safari dużo wcześniej. W Chromium dodaliśmy przekształcenia 3D i akcelerację sprzętową w systemie Windows. Dwie pozostałe platformy pojawią się wkrótce.
Przyspieszenie GPU uruchamia się tylko w pewnych ściśle ograniczonych warunkach, ale przekształcenia 3D i animowana przezroczystość to najczęstsze przyczyny wyłączenia przełącznika. Można go włączyć w nieco chwytliwy, ale dyskretny sposób:
.hwaccel { -webkit-transform: translateZ(0); }
Nie ma jednak gwarancji. :) Przy włączonej i obsługiwanej akceleracji sprzętowej translacja animowana, obrót, skalowanie i przezroczystość będą znacznie płynniejsze dzięki komponowaniu GPU. Są one obsługiwane bezpośrednio w GPU i nie wymagają ponownego rysowania zawartości warstwy. Jednak każda usługa wpływająca na układ strony nadal będzie działać względnie wolno.
Wskazówka 7. W przypadku operacji obciążających procesor
Narzędzia internetowe mają dwie ważne zalety: 1) są szybkie. 2) Podczas wykonywania zadań przeglądarka pozostaje elastyczna. Zobacz prezentację HTML5 dla pracowników roboczych w praktyce. Oto kilka sytuacji, w których możesz użyć procesów Web Workers:
- Formatowanie tekstu w długim dokumencie
- Wyróżnianie składni
- Przetwarzam obraz
- Synteza obrazu
- Przetwarzanie dużych tablic
Wskazówka 8. Atrybuty formularzy HTML5 i typy danych wejściowych
HTML5 wprowadza nowy zestaw typów danych wejściowych – aktualizujemy nasz zestaw komponentów text, password i file. Teraz obejmują search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range i color. Obsługa tych przeglądarek jest różna, przy czym obecnie większość z nich jest wdrażana w przeglądarce Opera. Dzięki wykrywaniu funkcji można określić, czy przeglądarka ma wbudowaną obsługę (i oferuje interfejs użytkownika taki jak selektor daty lub selektor kolorów). Jeśli nie, można nadal używać widżetów JS do wykonywania tych typowych zadań.
Oprócz typów pól do wprowadzania danych dodaliśmy kilka przydatnych funkcji. Dane wejściowe placeholder to domyślny tekst, który jest usuwany, gdy go klikniesz, a element autofocus koncentruje się na wczytywaniu strony, dzięki czemu możesz od razu korzystać z tego pola. Kolejną nowością w HTML5 jest sprawdzanie poprawności danych wejściowych. 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, na podstawie którego dane będą sprawdzane. Nieprawidłowe wartości blokujące przesłanie formularza. Ta składnia deklaratywnego znacznie poprawia czytelność źródła, ale także znacznie zmniejsza konieczność korzystania z JavaScriptu. Również w tym przypadku możesz użyć wykrywania funkcji, aby wyświetlić rozwiązanie zastępcze, jeśli nie są one obsługiwane natywnie.
Korzystając z natywnych widżetów, nie musisz przesyłać dużych ilości kodu JavaScript i css niezbędnych do ich pobrania. Przyspieszy to wczytywanie strony i prawdopodobnie poprawi responsywność widżetów. Aby wypróbować niektóre z tych ulepszeń wprowadzania danych, zajrzyj do prezentacji HTML5.
Wskazówka 9. Używaj efektów CSS3 zamiast żądać ciężkich sprite’ów graficznych
CSS3 daje wiele nowych możliwości określania stylu, które wykraczają poza korzystanie z obrazów w celu dokładnego przedstawienia projektu wizualnego. Zastąpienie obrazu o wielkości 2 tys. 100 bajtami pliku CSS to ogromna korzyść, nie wspominając o usunięciu kolejnego żądania HTTP. Oto kilka właściwości, o których warto się zapoznać:
- Gradienty liniowe i promieniowe
- Promień obramowania przy zaokrąglonych narożnikach
- Cień ramki – cienie i poświata
- RGBA dla nieprzezroczystości alfa
- Przekształcenia rotacji
- Maski CSS
Możesz na przykład utworzyć bardzo dopracowane przyciski za pomocą gradientów i powielać wiele innych efektów Sans-images. Przeglądarki w większości z nich obsługują te funkcje, ale możesz skorzystać z biblioteki takiej jak Modernizr, aby wychwytywać przeglądarki, które nie obsługują tych funkcji, i w razie potrzeby skorzystać z obrazów.
Wskazówka 10. Protokół WebSocket zapewnia szybszą transmisję przy mniejszej przepustowości niż XHR
Komponent WebSockets powstał w odpowiedzi na rosnącą popularność oprogramowania Comet. Używanie WebSockets już teraz zamiast modelu Comet przez XHR ma wiele zalet.
Protokół WebSockets ma bardzo lekkie kadrowanie, dlatego zużywana przez niego przepustowość jest często mniejsza niż w przypadku XHR. Niektóre raporty wskazują o 35% mniej bajtów przesyłanych przez ten przewód. Dodatkowo przy większej liczbie widoczna jest różnica w wydajności dostarczania wiadomości. XHR zarejestrowano w tym teście, a jego łączny czas jest o 3500% dłuższy niż w przypadku WebSockets. W końcu firma Ericcson Labs wzięła pod uwagę wydajność protokołów WebSockets i stwierdziła, że czasy pingowania przez protokół HTTP były 3–5 razy dłuższe niż w przypadku WebSockets ze względu na znaczne wymagania dotyczące przetwarzania. Stwierdził on, że protokół WebSocket jest zdecydowanie bardziej odpowiedni do zastosowań w czasie rzeczywistym.
Dodatkowe materiały
Aby uzyskać rekomendacje dotyczące pomiarów i skuteczności, korzystaj z rozszerzeń przeglądarki Firefox Page Speed i YSlow. Dodatkowo narzędzia Speed Tracer dla Chrome i DynaTrace Ajax for IE zapewniają bardziej szczegółowy poziom rejestrowania analiz.