wydajność aplikacji angularowych - meet.js 27.11.2014
TRANSCRIPT
![Page 1: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/1.jpg)
Wydajność aplikacji AngularJS
Kamil Zasada
2014-11-27
![Page 2: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/2.jpg)
Czynniki wpływające na wydajność aplikacji internetowych?
2014-11-27 2 Wydajność aplikacji AngularJS
![Page 3: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/3.jpg)
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
![Page 4: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/4.jpg)
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
![Page 5: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/5.jpg)
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
![Page 6: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/6.jpg)
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
![Page 7: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/7.jpg)
Narzędzia
2014-11-27 7 Wydajność aplikacji AngularJS
![Page 8: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/8.jpg)
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
![Page 9: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/9.jpg)
![Page 10: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/10.jpg)
Optymalizacja CPU
2014-11-27 10 Wydajność aplikacji AngularJS
• przyspieszanie cyklu $digest
• minimalizowanie liczby wywołań $digest
![Page 11: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/11.jpg)
1. Wydajne watch’e
2. Minimalizowanie liczby watch’y
$scope.$watch(watchExp, changeCallback)
2014-11-27
Przyspieszanie cyklu $digest
11 Wydajność aplikacji AngularJS
![Page 12: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/12.jpg)
{{ fullName | myCustomFilter }}
2014-11-27
Przyspieszanie cyklu $digest
12 Wydajność aplikacji AngularJS
![Page 13: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/13.jpg)
<h1>{{ title | translate }}</h1>
<h1 translate>{{ title }}</h1>
2014-11-27
Przyspieszanie cyklu $digest
13 Wydajność aplikacji AngularJS
![Page 14: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/14.jpg)
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
![Page 15: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/15.jpg)
![Page 16: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/16.jpg)
ng-show / ng-hide
ng-if / ng-switch
.directive()
2014-11-27
Przyspieszanie cyklu $digest
16 Wydajność aplikacji AngularJS
![Page 17: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/17.jpg)
$scope.$apply() == $rootScope.$digest()
$scope.$digest()
2014-11-27
Minimalizowanie liczby $digest
17 Wydajność aplikacji AngularJS
![Page 18: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/18.jpg)
2014-11-27
Minimalizowanie liczby $digest
18 Wydajność aplikacji AngularJS
1. $scope.$digest()
2. _.debounce()
3. < XHR
4. $timeout(…, …, false)
![Page 19: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/19.jpg)
Optymalizacja RAM
2014-11-27 19 Wydajność aplikacji AngularJS
• minimalizowanie złożoności modeli
![Page 20: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/20.jpg)
2014-11-27
Złożoność modeli
20 Wydajność aplikacji AngularJS
DEEP COMPARE
$scope.$watch(watchExpression, changeCallback, true)
![Page 21: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/21.jpg)
![Page 22: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/22.jpg)
![Page 23: Wydajność aplikacji Angularowych - meet.js 27.11.2014](https://reader031.vdocuments.pub/reader031/viewer/2022020123/55a887d11a28abd6288b4597/html5/thumbnails/23.jpg)