#perfmatters: techniki przyrządzania dla ninja
Znajomość narzędzi dla programistów jest kluczem do bycia ekspertem w zakresie efektywności. Colt przeanalizował 3 filary wydajności: sieć, obliczenia i renderowanie, przedstawiając najważniejsze problemy w każdym z tych obszarów oraz dostępne narzędzia do ich znajdowania i usuwania.
- Możesz teraz profilować Chrome na Androidzie za pomocą dobrze znanych i lubianych Narzędzi deweloperskich w Chrome na komputerze.
- Pętla iteracyjna w przypadku zadań związanych z efektywnością to: zbieranie danych, uzyskiwanie statystyk, podejmowanie działań.
- Nadaj priorytet zasobom, które znajdują się na krytycznej ścieżce renderowania stron.
- Unikaj malowania, to bardzo drogie.
- Unikaj wyłączania pamięci i wykonywania kodu w najbardziej krytycznych momentach w aplikacji.
#perfmatters: optymalizacja wydajności sieci
Sieć i czas oczekiwania zazwyczaj odpowiadają za 70% łącznego czasu wczytywania strony w witrynie. To duży odsetek, ale oznacza również, że wszelkie wprowadzane w ten sposób ulepszenia przyniosą ogromne korzyści użytkownikom. W tym materiale Ilya opowiedział o ostatnich zmianach w Chrome, które skrócą czas ładowania, a także o kilku zmianach, które można wprowadzić w swoim środowisku, aby ograniczyć obciążenie sieci do absolutnego minimum.
- Chrome M27 ma nowy, ulepszony system planowania zasobów.
- Dzięki Chrome M28 strony SPDY są nawet szybsze.
- Przebudowaliśmy prostą pamięć podręczną Chrome.
- SPDY / HTTP/2.0 znacznie zwiększa szybkość transferu. Istnieją starsze moduły SPDY dla nginx, Apache i Jetty (to tylko trzy).
- QUIC to nowy, eksperymentalny protokół oparty na UDP. To dopiero początek drogi, ale zdaje się, że użytkownicy będą wygrali.
#perfmatters: Układ i renderowanie 60 kl./s
Osiągnięcie 60 FPS w projektach bezpośrednio przekłada się na zaangażowanie użytkowników i ma kluczowe znaczenie dla jego sukcesu. W tej prezentacji Nat i Tom omówili potok renderowania Chrome, kilka częstych przyczyn pomijania klatek i sposoby ich unikania.
- Klatka ma 16 ms. Zawiera język JavaScript, obliczenia stylu, malowanie i komponowanie.
- Malowanie jest extremely kosztowne. Burza farby to sytuacja, w której niepotrzebnie powtarzasz drogie czynności malarskie.
- Warstwy służą do zapisywania malowanych elementów w pamięci podręcznej.
- Moduły obsługi wprowadzania danych (detektory dotykowe i kółko myszy) mogą zakłócać reakcję – w miarę możliwości unikaj ich. Kiedy nie możesz ograniczyć ich do minimum.
#perfmatters: Błyskawiczne aplikacje internetowe na komórki
Krytyczna ścieżka renderowania odnosi się do wszystkiego (JavaScript, HTML, CSS, obrazów), których przeglądarka potrzebuje przed rozpoczęciem malowania strony. Nadanie priorytetu zasobom na krytycznej ścieżce renderowania jest konieczne, 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 przeszedł przez proces identyfikowania zasobów witryny PageSpeed Insights i nadawania im priorytetów, zmieniając czas wczytywania z 20 sekund do ponad 1 sekundy.
- Wyeliminuj blokujący renderowanie kod JavaScript i CSS.
- Nadaj priorytet widocznej treści.
- Ładuj skrypty asynchronicznie.
- Renderuj początkowy widok po stronie serwera jako kod HTML i uzupełnij go za pomocą JavaScriptu.
- Ogranicz kod CSS blokujący renderowanie. Przesyłaj tylko style niezbędne do wyświetlenia początkowego widocznego obszaru, a potem pokaż resztę.
- Duże identyfikatory URI danych wbudowane w kod CSS blokujący renderowanie są szkodliwe dla wydajności renderowania i blokują zasoby, w przypadku których adresy URL obrazów nie są blokowane.