Поговорим о digest цикле и dirty checking, и о том как это связано с производительностью приложений на AngularJS. Также рассмотрим способы обнаружения и устранения основных причин проблем с производительностью. Презентация подготовлена по материалам выступления Анастасии Рыбик на витебской конференции “Developer's Software Conference” (31.10.2015). Запись выступления: https://events.epam.com/events/dsc2015/talks/103.

1. 1
ANGULAR.JS
Проблемы с производительностью и способы их решения

2. 2
Anastasiya Rybik
Software Engineer,
EPAM Systems

3. 3
ANGULARJS?
ЗА ЧТО МЫ ЛЮБИМ

4. 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. 5
Основные понятияОсновные понятия
DIGEST CYCLEWATCHER
DIRECTIVE SCOPE

6. 6
Основные понятияОсновные понятия
Directive ‘Smart Input’

7. 7
Как работает data-binding?
ACTION
UPDATE
MODEL
VIEW IS
UPDATED

8. 8
Как работает data-binding?
ACTION
UPDATE
MODEL
VIEW IS
UPDATED
DIGEST
CYCLE
WATCHERS
DIRTY?
NO
YES

9. 9
Инструменты
Chrome
Developer Tools
AngularJS
Batarang
Angular
Watchers

10. 10
• Open Timeline in Developer Tools
Timeline

11. 11
• Open Timeline in Developer Tools
• Record
Timeline

12. 12
• Open Timeline in Developer Tools
• Record
• Find your action
Timeline

13. 13
• Open Timeline in Developer Tools
• Record
• Find your action
• Check timing
Timeline

14. 14
Пример

15. 15

16. 16
Use bind-once

17. 17
Use bind-once

18. 18
Multiple Digest cycles

19. 19
Digest

20. 20
Digest

21. 21
ng-animate

22. 22
Bootstrap. To use or not to use
Bootstrap Dropdown <select> </select>

23. 23
With native <select>

24. 24
ng-show VS ng-if

25. 25
ng-show VS ng-if

26. 26
Result

27. 27
VS116.530 42.049

28. 28
Best practices
• Watchers
• Use bind-once
• Third-party libraries
• Ng-animate
• Ng-show/ng-if

29. 29
THANK YOU!