Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

3.424 Aufrufe

Veröffentlicht am

Prezentacja z meetupu grupy "Uszanowanko Programowanko", tematyka AngularJS: http://www.uszanowanko.pl/angular

Autor: Łukasz Bachman

Szybkie prototypowanie aplikacji w AngularJS jest jedną z największych zalet tego narzędzia. Jednakże jako programiści musimy zadbać o to, aby pisane przez nas aplikacje były wydajne zarówno pod względem pamięciowym, jak i czasowym. W mojej krótkiej prezentacji chciałbym przedstawić kilka praktycznych porad, które pomogą to osiągnąć. Całość omówimy na prawdziwym studium przypadku aplikacji przetwarzającej duże zbiory danych.

Veröffentlicht in: Software
  • Login to see the comments

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

  1. 1. Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z użyciem
  2. 2. 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
  3. 3. Za wszystkie nietrafne tłumaczenia i wszelkie inne makaronizmy serdecznie przepraszam!
  4. 4. 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!
  5. 5. Czy AngularJS jest mało wydajny?
  6. 6. 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
  7. 7. Rodzaje optymalizacji ● Pamięciowa (RAM) ● Czasowa (CPU) ● CPU vs. RAM ● Zasobów (pula połączeń HTTP, blokowanie w środowisku wielowątkowym)
  8. 8. 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
  9. 9. 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
  10. 10. Demo
  11. 11. Optymalizacja ng-repeat: wyniki ng-repeat Natywny JS i DOM Częściowe aktualizacje 1047ms 801ms 322ms Czas renderowania pierwszej części tabeli: 13ms!
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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

×