wydajność aplikacji angularowych - meet.js 27.11.2014

Wydajność aplikacji AngularJS

Kamil Zasada

2014-11-27

Czynniki wpływające na wydajność aplikacji internetowych?

2014-11-27 2 Wydajność aplikacji AngularJS

1. Liczba żądań HTTP

2. Rozmiar drzewa DOM

3. Liczba i złożoność reguł CSS

4. Logika i algorytmy

5. Struktury danych

2014-11-27

Czynniki

3 Wydajność aplikacji AngularJS

1. Liczba żądań HTTP

2. Rozmiar drzewa DOM

3. Liczba i złożoność reguł CSS

4. Logika i algorytmy - CPU

5. Struktury danych - RAM

2014-11-27

Czynniki

4 Wydajność aplikacji AngularJS

Anything faster than 50ms is imperceptible to humans and thus can be considered as „instant”. Miško Hevery

2014-11-27 5 Wydajność aplikacji AngularJS

You can't really show more than about 2000 pieces of information to a human on a single page. Anything more than that is really bad UI, and humans can't process this anyway. Miško Hevery

2014-11-27 6 Wydajność aplikacji AngularJS

Narzędzia

2014-11-27 7 Wydajność aplikacji AngularJS

1. Chrome DevTools • Network

• Timeline

• Profiles

2. performance.now()

3. AngularJS Batarang (Chrome Web Store)

4. ng-inspector for AngularJS (Chrome Web Store)

2014-11-27

Narzędzia

8 Wydajność aplikacji AngularJS

Optymalizacja CPU

2014-11-27 10 Wydajność aplikacji AngularJS

• przyspieszanie cyklu $digest

• minimalizowanie liczby wywołań $digest

1. Wydajne watch’e

2. Minimalizowanie liczby watch’y

$scope.$watch(watchExp, changeCallback)

2014-11-27

Przyspieszanie cyklu $digest

11 Wydajność aplikacji AngularJS

{{ fullName | myCustomFilter }}

2014-11-27

Przyspieszanie cyklu $digest

12 Wydajność aplikacji AngularJS

<h1>{{ title | translate }}</h1>

<h1 translate>{{ title }}</h1>

2014-11-27

Przyspieszanie cyklu $digest

13 Wydajność aplikacji AngularJS

Angular 1.3

{{ ::value }}

Angular 1.2 https://github.com/Pasvaz/bindonce

https://github.com/kseamon/fast-bind

2014-11-27

Przyspieszanie cyklu $digest

14 Wydajność aplikacji AngularJS

ng-show / ng-hide

ng-if / ng-switch

.directive()

2014-11-27

Przyspieszanie cyklu $digest

16 Wydajność aplikacji AngularJS

$scope.$apply() == $rootScope.$digest()

$scope.$digest()

2014-11-27

Minimalizowanie liczby $digest

17 Wydajność aplikacji AngularJS

2014-11-27

Minimalizowanie liczby $digest

18 Wydajność aplikacji AngularJS

1. $scope.$digest()

2. _.debounce()

3. < XHR

4. $timeout(…, …, false)

Optymalizacja RAM

2014-11-27 19 Wydajność aplikacji AngularJS

• minimalizowanie złożoności modeli

2014-11-27

Złożoność modeli

20 Wydajność aplikacji AngularJS

DEEP COMPARE

$scope.$watch(watchExpression, changeCallback, true)

Kamil Zasada kzasada@pgs-soft.com

2014-11-27 24 Wydajność aplikacji AngularJS

Dzięki!