Jeszcze_wydajniejsze_witryny_internetowe_Przyspieszanie_dzialania_serwisow_WWW_jewywi.pdf

(444 KB) Pobierz
Jeszcze wydajniejsze witryny
internetowe. Przyspieszanie
dzia³ania serwisów WWW
Autor:
Steve Souders
T³umaczenie: Leszek Sagalara
ISBN: 978-83-246-2579-6
Tytu³ orygina³u:
Even Faster Web Sites:
Performance Best Practices for Web Developers
Format: 168×237, stron: 240
Poznaj najlepsze techniki zwiêkszania wydajnoœci aplikacji internetowych!
• Jak stosowaæ technikê kodowania porcjami w celu szybszego kodowania stron?
• Jak pisaæ wydajny kod JavaScript?
• Jak rozdzielaæ zasoby na wiele domen?
Wydajnoœæ witryny stanowi jeden z podstawowych czynników jej sukcesu w sieci.
Jednak bogactwo treœci i popularnoœæ technologii Ajax w dzisiejszych aplikacjach
internetowych wystawiaj¹ przegl¹darki na ciê¿k¹ próbê. W tej sytuacji potrzebujesz
profesjonalnych informacji i skutecznych metod zwiêkszaj¹cych wydajnoœæ Twojej
strony WWW. Jeœli chcesz j¹ poprawiæ, powinieneœ skorzystaæ z tej ksi¹¿ki, poniewa¿
znajdziesz tu mnóstwo wartoœciowych technik, które pomog¹ Ci zoptymalizowaæ
dzia³anie ka¿dej aplikacji.
Ksi¹¿ka „Jeszcze wydajniejsze witryny internetowe. Przyspieszanie dzia³ania serwisów
WWW” zawiera najbardziej aktualne porady, dziêki którym Twoja witryna otrzyma
nowy zastrzyk energii. Z tego podrêcznika dowiesz siê, w jaki sposób Ajax wp³ywa na
interakcjê przegl¹darek i serwerów, oraz nauczysz siê wykorzystywaæ tê relacjê w celu
identyfikacji elementów s³u¿¹cych do poprawy wydajnoœci aplikacji. Poznasz metody
³¹czenia kodu osadzonego ze skryptami asynchronicznymi oraz kilka specyficznych
technik przyspieszania JavaScriptu. Dziêki tej ksi¹¿ce bêdziesz wiedzia³, jak zaoszczêdziæ
cenne sekundy przez skrócenie czasu wczytywania, a tak¿e sprawisz, ¿e Twoja witryna
bêdzie dzia³aæ jeszcze szybciej.
• Tworzenie responsywnych aplikacji WWW
• Wczytywanie skryptów bez blokowania
• £¹czenie skryptów asynchronicznych
• Pozycjonowanie skryptów osadzonych
• Pisanie wydajnego kodu JavaScript
• Skalowanie przy u¿yciu Comet
• Optymalizacja grafiki
• Rozdzielanie zasobów na wiele domen
• Upraszczanie selektorów CSS
Szybkoœæ ma znaczenie – zwiêksz wydajnoœæ swojej strony WWW
Spis tre ci
Wspó autorzy ...........................................................................................................................9
Przedmowa ..............................................................................................................................11
Jak podzielona jest ksiñ ka?
Wydajno è JavaScriptu
Wydajno è sieci
Wydajno è przeglñdarki
Konwencje zastosowane w ksiñ ce
U ywanie przykäadowych kodów
Podziökowania
11
13
14
15
15
16
16
1. Wydajno ë technologii Ajax ........................................................................................ 19
Co za co
Zasady optymalizacji
Ajax
Przeglñdarka
Fajerwerki
JavaScript
Podsumowanie
19
20
22
22
23
24
24
2. Tworzenie responsywnych aplikacji WWW ...............................................................25
Co to znaczy „wystarczajñco szybko”?
Pomiar opó nienia
Gdy opó nienia sñ zbyt du e
Wñtkowanie
Zapewnienie responsywno ci
Web Workers
Gears
Timery
Wpäyw zu ycia pamiöci na czas odpowiedzi
Pamiöè wirtualna
Rozwiñzywanie problemów zwiñzanych z pamiöciñ
Podsumowanie
27
28
30
30
31
31
32
33
34
35
36
36
3
3. Rozdzielanie przesy anej zawarto ci .........................................................................39
Nie wszystko naraz
Oszczödno ci z podziaäu
Sposób podziaäu
Niezdefiniowane symbole i sytuacje wy cigu
Studium przypadku: Google Calendar
39
40
41
42
43
4. Wczytywanie skryptów bez blokowania ...................................................................45
Blokowanie skryptów
Techniki pobierania skryptów
XHR Eval
XHR Injection
Skrypt w IFrame
Skrypt w elemencie DOM
Skrypt odroczony
Znacznik SCRIPT w instrukcji document.write
Wska niki zajöto ci przeglñdarki
Zapewnianie (lub unikanie) wykonywania w kolejno ci
Podsumowanie wyników
Zwyciözcñ zostaje…
45
47
47
48
49
50
50
50
51
53
54
55
5.
éczenie skryptów asynchronicznych ........................................................................59
Przykäad kodu: menu.js
Sytuacja wy cigu
Asynchroniczne zachowanie kolejno ci
Technika 1.: Wywoäanie zwrotne ustalone
Technika 2.: Window Onload
Technika 3.: Timer
Technika 4.: Script Onload
Technika 5.: Degradujñce znaczniki skryptu
Wiele skryptów zewnötrznych
Zarzñdzany kod XHR
Techniki skryptu w elemencie DOM i skryptu w instrukcji document.write
Ogólne rozwiñzanie
Pojedynczy skrypt
Wiele skryptów
Asynchroniczno è w praktyce
Google Analytics i Dojo
YUI Loader Utility
60
62
63
64
65
66
66
67
69
70
73
76
76
77
79
79
81
6. Pozycjonowanie skryptów osadzonych .....................................................................85
Blokujñce dziaäanie skryptów osadzonych
Przeniesienie skryptów osadzonych na koniec dokumentu
Asynchroniczne inicjowanie wykonywania skryptów
U ycie SCRIPT DEFER
Zachowywanie kolejno ci wczytywania CSS i kodu JavaScript
85
86
87
88
89
4
_
Spis tre ci
Niebezpieczeþstwo: arkusz stylów przed skryptem osadzonym
Skrypty osadzone nie sñ blokowane przez wiökszo è pobieraþ
Skrypty osadzone sñ blokowane przez arkusze stylów
Takie rzeczy siö zdarzajñ
90
90
91
92
7. Pisanie wydajnego kodu JavaScript ............................................................................95
Zarzñdzanie zasiögiem
Stosowanie zmiennych lokalnych
Powiökszanie äaþcucha zasiögu
Wydajny dostöp do danych
Sterowanie przepäywem
Szybkie warunkowanie
Szybkie pötle
Optymalizacja äaþcuchów znakowych
Konkatenacja äaþcuchów
Przycinanie äaþcuchów
Unikaj skryptów o däugim czasie dziaäania
Wprowadzanie przerw przy u yciu timerów
Wzorce timerów do wprowadzania przerw
Podsumowanie
95
97
98
100
103
103
107
112
112
114
115
116
118
120
8. Skalowanie przy u yciu Comet ................................................................................. 123
Jak dziaäa Comet?
Techniki transportowe
Odpytywanie
Wydäu one odpytywanie
Wieczna ramka
Strumieniowanie XHR
Techniki transportowe przyszäo ci
Rozwiñzania miödzydomenowe
Efekty wdro enia w aplikacjach
Zarzñdzanie poäñczeniami
Pomiar wydajno ci
Protokoäy
Podsumowanie
123
125
125
125
127
128
130
130
131
131
132
132
133
9. Nie tylko gzip ............................................................................................................. 135
Dlaczego to ma znaczenie?
Co jest tego powodem?
Szybki przeglñd
Winowajca
Przykäady popularnych óäwich podsäuchiwaczy
Jak pomóc tym u ytkownikom?
Projektowanie pod kñtem zminimalizowania
rozmiarów nieskompresowanych danych
Edukowanie u ytkowników
Bezpo rednie wykrywanie obsäugi gzip
135
137
137
137
138
138
139
143
144
Spis tre ci
_
5
10. Optymalizacja grafiki ................................................................................................ 147
Dwa etapy upraszczajñce optymalizacjö grafiki
Formaty plików graficznych
Informacje wstöpne
Charakterystyka ró nych formatów graficznych
Wiöcej o PNG
Automatyczna bezstratna optymalizacja grafiki
Optymalizacja plików PNG
Usuwanie metadanych JPEG
Konwersja plików GIF do formatu PNG
Optymalizacja animacji GIF
Smush.it
Progresywna wersja formatu JPEG dla du ych grafik
Przezroczysto è stopniowana — unikaj AlphaImageLoader
Efekty przezroczysto ci stopniowanej
AlphaImageLoader
Problemy zwiñzane z filtrem AlphaImageLoader
Progresywne rozszerzenie PNG8 o przezroczysto è stopniowanñ
Optymalizacja
Podej cie caäo ciowe kontra podej cie moduäowe
Wysoce zoptymalizowane obrazy CSS Sprite
Inne optymalizacje grafiki
Unikaj skalowania grafiki
Optymalizuj grafiki generowane
Ikony favicon
Ikona Apple touch
Podsumowanie
148
149
149
151
153
155
155
156
157
158
158
158
159
159
161
162
164
165
166
167
167
168
168
169
170
171
11. Rozdzielanie zasobów na wiele domen ....................................................................173
cie ka krytyczna
Kto rozdziela zasoby?
Przej cie na HTTP/1.0
Rozdzielanie zasobów
Adres IP czy nazwa hosta?
Ile domen?
Jak podzieliè zasoby?
Nowsze przeglñdarki
173
175
177
179
179
180
180
180
12. Wcze niejsze wysy anie dokumentu .........................................................................181
Funkcja flush
Buforowanie danych wyj ciowych
Kodowanie porcjami
Funkcja flush i kompresja gzip
Inne oprogramowanie po redniczñce
Blokowanie domen przy u ywaniu funkcji flush
Przeglñdarki — ostatnia przeszkoda
Funkcja flush poza PHP
Lista kontrolna
6
_
Spis tre ci
181
183
185
186
186
187
188
188
189
Zgłoś jeśli naruszono regulamin