wydajność aplikacji angularowych - meet.js 27.11.2014
TRANSCRIPT
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)
