View
204
Download
1
Category
Preview:
Citation preview
1
ANGULAR.JS
Проблемы с производительностью и способы их решения
2
Anastasiya Rybik
Software Engineer,
EPAM Systems
3
ANGULARJS?
ЗА ЧТО МЫ ЛЮБИМ
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
5
Основные понятияОсновные понятия
DIGEST CYCLEWATCHER
DIRECTIVE SCOPE
6
Основные понятияОсновные понятия
Directive ‘Smart Input’
7
Как работает data-binding?
ACTIONUPDATE
MODEL
VIEW IS
UPDATED
8
Как работает data-binding?
ACTIONUPDATE
MODELVIEW IS
UPDATED
DIGEST
CYCLE
WATCHERSDIRTY?
NO
YES
9
Инструменты
Chrome
Developer Tools
AngularJS
Batarang
Angular
Watchers
10
• Open Timeline in Developer Tools
Timeline
11
• Open Timeline in Developer Tools
• Record
Timeline
12
• Open Timeline in Developer Tools
• Record
• Find your action
Timeline
13
• Open Timeline in Developer Tools
• Record
• Find your action
• Check timing
Timeline
14
Пример
15
16
Use bind-once
17
Use bind-once
18
Multiple Digest cycles
19
Digest
20
Digest
21
ng-animate
22
Bootstrap. To use or not to use
Bootstrap Dropdown <select> </select>
23
With native <select>
24
ng-show VS ng-if
25
ng-show VS ng-if
26
Result
27
VS116.530 42.049
28
Best practices
• Watchers
• Use bind-once
• Third-party libraries
• Ng-animate
• Ng-show/ng-if
29
THANK YOU!
Recommended