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!