Проблемы с производительностью приложений на AngularJS и...
-
Upload
vitebsk-dsc -
Category
Technology
-
view
195 -
download
1
Transcript of Проблемы с производительностью приложений на AngularJS и...
![Page 1: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/1.jpg)
1
ANGULAR.JS
Проблемы с производительностью и способы их решения
![Page 2: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/2.jpg)
2
Anastasiya Rybik
Software Engineer,
EPAM Systems
![Page 3: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/3.jpg)
3
ANGULARJS?
ЗА ЧТО МЫ ЛЮБИМ
![Page 4: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/4.jpg)
4
Two-Way Data Binding
Template
View
Model
Continuous Updates
Model in Single-Source-of-Truth
Compile
Change to Model
updates View
Change to View
updates Model
![Page 5: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/5.jpg)
5
Основные понятияОсновные понятия
DIGEST CYCLEWATCHER
DIRECTIVE SCOPE
![Page 6: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/6.jpg)
6
Основные понятияОсновные понятия
Directive ‘Smart Input’
![Page 7: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/7.jpg)
7
Как работает data-binding?
ACTIONUPDATE
MODEL
VIEW IS
UPDATED
![Page 8: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/8.jpg)
8
Как работает data-binding?
ACTIONUPDATE
MODELVIEW IS
UPDATED
DIGEST
CYCLE
WATCHERSDIRTY?
NO
YES
![Page 9: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/9.jpg)
9
Инструменты
Chrome
Developer Tools
AngularJS
Batarang
Angular
Watchers
![Page 10: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/10.jpg)
10
• Open Timeline in Developer Tools
Timeline
![Page 11: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/11.jpg)
11
• Open Timeline in Developer Tools
• Record
Timeline
![Page 12: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/12.jpg)
12
• Open Timeline in Developer Tools
• Record
• Find your action
Timeline
![Page 13: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/13.jpg)
13
• Open Timeline in Developer Tools
• Record
• Find your action
• Check timing
Timeline
![Page 14: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/14.jpg)
14
Пример
![Page 15: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/15.jpg)
15
![Page 16: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/16.jpg)
16
Use bind-once
![Page 17: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/17.jpg)
17
Use bind-once
![Page 18: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/18.jpg)
18
Multiple Digest cycles
![Page 19: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/19.jpg)
19
Digest
![Page 20: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/20.jpg)
20
Digest
![Page 21: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/21.jpg)
21
ng-animate
![Page 22: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/22.jpg)
22
Bootstrap. To use or not to use
Bootstrap Dropdown <select> </select>
![Page 23: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/23.jpg)
23
With native <select>
![Page 24: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/24.jpg)
24
ng-show VS ng-if
![Page 25: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/25.jpg)
25
ng-show VS ng-if
![Page 26: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/26.jpg)
26
Result
![Page 27: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/27.jpg)
27
VS116.530 42.049
![Page 28: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/28.jpg)
28
Best practices
• Watchers
• Use bind-once
• Third-party libraries
• Ng-animate
• Ng-show/ng-if
![Page 29: Проблемы с производительностью приложений на AngularJS и способы их решения](https://reader034.fdocument.pub/reader034/viewer/2022042618/58ab79c61a28abb54e8b6c19/html5/thumbnails/29.jpg)
29
THANK YOU!