#perfmatters: metody korzystania z narzędzi dla ninja ds. wydajności
Aby zostać ekspertem ds. skuteczności, musisz dobrze znać narzędzia programistyczne. Colt omówił 3 filary wydajności: sieć, obliczanie i renderowanie, przedstawiając najważniejsze problemy w każdej z tych dziedzin oraz narzędzia do ich znajdowania i eliminowania.
- Możesz teraz profilować Chrome na Androidzie za pomocą Narzędzi programistycznych, które znasz i lubisz z wersji na komputer.
- Cykl iteracji w przypadku pracy nad skutecznością: zbieranie danych, uzyskiwanie statystyk, podejmowanie działań.
- Ustal priorytety zasobów, które są na ścieżce renderowania krytycznej dla Twoich stron.
- Unikaj malowania, bo to bardzo drogie.
- Unikaj częstych zmian w pamięci i wykonywania kodu w krytycznych momentach w aplikacji.
#perfmatters: optymalizacja wydajności sieci
Sieć i opóźnienie zwykle odpowiadają za 70% całkowitego czasu wczytywania strony. To duży odsetek, ale oznacza to też, że wszelkie ulepszenia w tym zakresie przyniosą ogromne korzyści użytkownikom. W tym wystąpieniu Ilya omawiał ostatnie zmiany w Chrome, które poprawiają czas wczytywania, oraz kilka zmian, które możesz wprowadzić w swoim środowisku, aby ograniczyć obciążenie sieci do absolutnego minimum.
- Chrome M27 zawiera nowy, ulepszony harmonogram zasobów.
- Chrome M28 przyspieszył działanie witryn SPDY.
- Prosta pamięć podręczna Chrome została całkowicie przebudowana.
- SPDY / HTTP/2.0 zapewniają ogromne przyspieszenie przesyłania. Istnieją dojrzałe moduły SPDY dostępne dla nginx, Apache i Jetty (by wymienić tylko 3 z nich).
- QUIC to nowy i eksperymentalny protokół oparty na UDP. Jest to nowy protokół, ale użytkownicy na pewno skorzystają na jego wprowadzeniu.
#perfmatters: układ i renderowanie w 60 kl./s
Uzyskanie 60 FPS w Twoich projektach jest bezpośrednio związane z zaangażowaniem użytkowników i ma kluczowe znaczenie dla sukcesu. W tej prezentacji Nat i Tom omówili m.in. ścieżkę renderowania w Chrome, typowe przyczyny utraty klatek i sposoby zapobiegania temu zjawisku.
- Czas trwania klatki to 16 ms. Zawiera ona JavaScript, obliczenia stylu, malowanie i kompozycję.
- Malowanie jest bardzo drogie. Paint Storm to niepotrzebne powtarzanie drogich prac związanych z malowaniem.
- Warstwy służą do umieszczania w pamięci podręcznej namalowanych elementów.
- Obsługa zdarzeń wejścia (słuchacze dotykowe i słuchacze kółka myszy) może zmniejszyć szybkość reakcji; unikaj ich, jeśli to możliwe. Nie można ich ograniczyć do minimum.
#perfmatters: błyskawiczne internetowe aplikacje mobilne
Krytyczna ścieżka renderowania to wszystko (JavaScript, HTML, CSS, obrazy), czego potrzebuje przeglądarka, zanim zacznie wyświetlać stronę. Priorytetowe dostarczanie komponentów na ścieżce renderowania jest niezbędne, zwłaszcza w przypadku użytkowników korzystających z urządzeń z ograniczonym dostępem do sieci, np. smartfonów w sieciach komórkowych. Bryan opowiedział, jak zespół Google przeprowadził proces identyfikacji i ustalenia priorytetów zasobów na potrzeby witryny PageSpeed Insights, dzięki czemu czas wczytywania skrócono z 20 sekund do nieco ponad 1 sekundy.
- Usuń kod JavaScript i CSS blokujący renderowanie.
- Nadaj priorytet widocznym treściom.
- Ładuj skrypty asynchronicznie.
- Wyświetl początkowy widok po stronie serwera jako kod HTML i rozszerz go za pomocą kodu JavaScript.
- Zminimalizuj blokowanie renderowania przez kod CSS. Prześlij tylko style potrzebne do wyświetlenia początkowego widocznego obszaru, a potem resztę.
- Duże identyfikatory URI danych wstawiane w CSS blokującym renderowanie są szkodliwe dla wydajności renderowania. Blokują one zasoby, w których przypadku adresy URL obrazów nie blokują.