#perfmatters: Techniki narzędzi dla ninja
Znajomość korzystania z narzędzi dla programistów jest kluczowa, aby zostać ekspertem ds. skuteczności. Colt opowiedział o 3 filarach wydajności: sieci, obliczeniach i renderowaniu, prezentując najważniejsze problemy w każdej z tych dziedzin oraz narzędzia, które umożliwiają ich wykrycie i wyeliminowanie.
- Teraz możesz profilować Chrome na Androidzie za pomocą znanych i lubianych Narzędzi deweloperskich na komputerze.
- pętla iteracji w przypadku pracy nad wydajnością polega na zebraniu danych, uzyskaniu statystyk i podjęciu działania.
- Nadaj priorytet tym zasobom, które znajdują się na krytycznej ścieżce renderowania Twoich stron.
- Unikaj malowania. To bardzo drogie.
- Unikaj zużywania pamięci i uruchamiania kodu w kluczowych momentach aplikacji.
#perfmatters: optymalizowanie wydajności sieci
Sieć i opóźnienia odpowiadają zwykle za 70% łącznego czasu wczytywania strony w witrynie. To duży odsetek, ale oznacza to również, że wszelkie wprowadzone ulepszenia przyniosą duże korzyści użytkownikom. W tym wykładzie Ilya przedstawił ostatnie zmiany w Chrome, które poprawiły czas wczytywania, oraz kilka zmian, które możesz wprowadzić w swoim środowisku, by ograniczyć obciążenie sieci do absolutnego minimum.
- Chrome M27 ma nowy, ulepszony harmonogram zasobów.
- Chrome M28 jeszcze bardziej przyspiesza strony SPDY.
- Prosta pamięć podręczna Chrome została ulepszona.
- Protokół SPDY / HTTP/2.0 znacznie przyspiesza transfer. Dostępne są dojrzałe moduły SPDY dla nginx, Apache i Jetty (to tylko 3 moduły).
- QUIC to nowy, eksperymentalny protokół zaprojektowany w oparciu o UDP; To dopiero początek, ale wygląda na to, że użytkownicy wygrają.
#perfmatters: układ i renderowanie 60 kl./s
Osiągnięcie w projektach 60 klatek na sekundę bezpośrednio wpływa na zaangażowanie użytkowników i ma kluczowe znaczenie dla powodzenia aplikacji. W tej prezentacji Nat i Tom opowiedzieli o procesie renderowania w Chrome, o kilku najczęstszych przyczynach pomijania klatek i o tym, jak ich uniknąć.
- Klatka trwa 16 ms. Zawiera JavaScript, obliczenia stylu, malowanie i komponowanie.
- Malowanie jest wyjątkowo drogie. Burza farb to miejsce, w którym niepotrzebnie powtarzasz kosztowne malowanie.
- Warstwy służą do zapisywania malowanych elementów w pamięci podręcznej.
- Moduły obsługi danych wejściowych (detektory dotyku i kółka myszy) mogą zaburzać reagowanie. unikaj ich. gdy nie można ograniczyć ich do minimum.
#perfmatters: błyskawiczne aplikacje internetowe na komórki
Krytyczna ścieżka renderowania odnosi się do wszystkiego (kodu JavaScript, HTML, CSS, obrazów) wymaganych przez przeglądarkę przed rozpoczęciem renderowania strony. W przypadku urządzeń ograniczonych do sieci, takich jak smartfony, które korzystają z sieci komórkowych, należy priorytetowo traktować wyświetlanie zasobów na krytycznej ścieżce renderowania. Bryan opowiedział o tym, jak zespół Google zdefiniował i określił priorytety zasobów w witrynie PageSpeed Insights, co skrócił czas wczytywania z 20 sekund do nieco powyżej 1 sekundy.
- Wyeliminuj blokujący renderowanie kod JavaScript i CSS.
- Nadaj priorytet widocznej treści.
- Ładuj skrypty asynchronicznie.
- Renderuj widok początkowy po stronie serwera jako kod HTML i uzupełnij go o kod JavaScript.
- Ogranicz kod CSS blokujący renderowanie. dodaj tylko style potrzebne do wyświetlenia początkowego widocznego obszaru, a następnie pozostałe.
- Identyfikatory URI dużych danych wbudowane w blokujący renderowanie CSS mają szkodliwy wpływ na wydajność renderowania. blokuje zasoby, w których adresy URL obrazów nie są blokowane.