Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem

Agenda

● Kilka słów o mnie● "Angular jest powooooooolny... jak Java."● Rodzaje optymalizacji● Dostępne narzędzia● Proste techniki optymalizacji● Bardziej zaawansowane techniki optymalizacji● Przypadek użycia● Bibliografia

Za wszystkie nietrafne tłumaczenia i wszelkie inne makaronizmy serdecznie przepraszam!

Kilka słów o mnie● Łukasz Bachman, lukaszbachman@gmail.com● staż deweloperski (oficjalnie): 2.5 roku @ Software House, 3 lata @ praca zdalna● ważniejsze technologie: Java (J2SE, J2EE, Spring), HTML+CSS, JavaScript, NodeJs● główne obowiązki

○ migracja aplikacji desktopowej e-discovery (Swing, REST) do wersji działającej w przeglądarce

○ projektowanie i wdrażanie nowych funkcji○ nadzór nad wydajnością całej platformy○ zapewnienie kompatybilności z poprzednimi wersjami

● u-w-i-e-l-b-i-a-m AngularJS!

Czy AngularJS jest mało wydajny?

Skąd przekonanie, że Angular nie jest wydajny?

● Brak znajomości narzędzi (AngularJS, przeglądarki)● Powierzchowna znajomość biblioteki● Brak analizy prawdziwych wąskich gardeł● Warstwa abstrakcji zwalnia z obowiązku analizy własnego

kodu● Przykład

Rodzaje optymalizacji

● Pamięciowa (RAM)● Czasowa (CPU)● CPU vs. RAM● Zasobów (pula połączeń HTTP, blokowanie w środowisku

wielowątkowym)

Dostępne narzędzia● Środowisko uruchomieniowe - przeglądarka WWW● https://developers.google.com/web/fundamentals/performance● https://developer.chrome.com/devtools

○ Timeline - śledzenie cyklu przetwarzania stron WWW○ Heap profiler - śledzenia alokacji pamięci○ CPU profiler - śledzenia czasu wykonywania operacji

● https://github.com/bahmutov/code-snippets● Dobre praktyki inżynierskie

Narzędzia: przeglądarka WWW

● budowanie drzew: DOM, CCSOM● blokowanie zasobów● etapy renderowania

○ tworzenie drzewa renderingu○ pozycjonowanie elementów na dostępnej przestrzeni

urządzenia (layout)○ zapisanie poszczególnych pikseli na płótnie (paint)

● pula połączeń HTTP

Demo

Optymalizacja ng-repeat: wyniki

ng-repeat Natywny JS i DOM Częściowe aktualizacje

1047ms 801ms 322ms

Czas renderowania pierwszej części tabeli: 13ms!

AngularJS: Podstawowe techniki optymalizacji

● nie zanieczyszczaj obiektów $scope● eliminuj zbędne obiekty $watch● korzystaj z jednorazowego wiązania

(bind-once, ::)● pisz dyrektywy wykorzystujące

natywny JS● dodawaj '$track by' do ng-repeat

AngularJS: Podstawowe techniki optymalizacji (c.d.)

● używaj reguł CSS zamiast ng-class

● unikaj funkcji w dyrektywach ng-*

● jeśli to możliwe, używaj $digest() zamiast $apply()● filtruj dane w kontrolerze, a nie w widoku

● dbaj o to, aby własne funkcje $watch() były wykonywane szybko

AngularJS: Bardziej zaawansowane techniki optymalizacji

● Opóźnione wywołanie funkcji i aktualizacji modelu (Debounce)● Memoryzacja? (Memoization)● Renderuj to co niezbędne, ładuj resztę w miarę potrzeb (stronnicowanie,

Virtual Scrolling #1, Virtual Scrolling #1● web workers● buforuj duże struktury danych w zwykłych obiektach JS, kopiuj do

mniejszych tablic● możesz spróbować ukrywać część widoku zamiast go usuwać, aby

uniknąć tworzenia DOM

Przypadek użycia: optymalizacja warstwy usługowej aplikacji w AngularJS

● Specyfika aplikacji:○ przetwarzanie dużych zbiorów dokumentów○ skomplikowane obliczenia po stronie serwerowej○ kilka otwartych okien aplikacji jednocześnie○ dwie aplikacje klienckie (J2SE, JS)

● Problem: użytkownicy raportują "zawieszenie się aplikacji po paru minutach pracy w grupie"● Diagnoza:

○ współdzielone zasoby RESTowe używane są w sposób nieodpowiedni w aplikacji JS

○ część serwerowa ewaluowała od początku projektu i zasoby te pobierały całe dokumenty do pamięci

○ część kliencka w JS ewaluowała i część danych uprzednio trzymanych w pamięci podręcznej była pobierana na nowo

● Efekt: wyczerpanie zasobów puli połączeń HTTP przeglądarki

Rozwiązanie: utworzenie nowego API RESTowego dla aplikacji klienckiej JS

● odseparowanie danych zmiennych i niezmiennych● przechowywanie obietnic HTTP do danych niezmiennych w cache'u● utworzenie usługi SharedItemDataService, do której kontrolery AngularJS mogą dowiązywać

swój model $scope● optymalizacja części serwerowej (wyeliminowanie blokowania BD, dedykowane zasoby

REST)● Kilka wniosków:

○ szybkie prototypowanie vs. wydajne API○ ograniczenie liczby połączeń HTTP poprawiło responsywność wielu funkcji w

aplikacji○ cache obietnic HTTP umożliwiających dostęp do obiektów niezmiennych jest

niezbędny w aplikacjach typu SPA

Bibliografia

● Niezbędnik: http://bahmutov.calepin.co/improving-angular-web-app-performance-example.html

● https://developers.google.com/web/fundamentals/performance/

● https://developer.chrome.com/devtools● http://jsfiddle.net/SDa2B/4/● http://kamilkp.github.io/angular-vs-repeat/#?tab=8