Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

3.229 visualizaciones

Publicado el

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.

Publicado en: Software
  • Sé el primero en comentar

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

×