...

Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS

by the-software-house

on

Report

Category:

Software

Download: 0

Comment: 0

1,038

views

Comments

Description

Download Uszanowanko Programowanko #2 - Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem AngularJS

Transcript

  • 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
Fly UP