Angular: Performance optimization / Оптимизация производительности

[FireVolkhov]

1. Использовать {{::value}} синтаксис, когда нет необходимости обновлять данные (доступно в 1.3.0 beta)
Пример

2. Делать больше DOM манипуляций в директиве
Вместо

<div ng-show=”something”></div>

$scope.something = false;
$scope.someMethod = function () {
  $scope.something = true;
};

Использовать

var menu = $element.find(‘ul’);
menu.hide();
$scope.someMethod = function () {
  menu.show();
};

3. По минимуму использовать фильтры в DOM
Вместо

{{ array | filter : expression : comparator }}

Использовать

scope.result = $filter('filter')(array, expression, comparator);

4. В часто вызываемых функциях mousemove, mouseover, mouseout и т.п. не использовать лишний раз $apply или $digest

[Aetae]

FireVolkhov, не проще тогда просто выкинуть angular на мороз и сразу писать по-человечески?)
В чём прикол фич которые всё равно нельзя использовать?)

[FireVolkhov]

"и сразу писать по-человечески?)" это как?
Прикол фитч в том, чтобы использовать их вмеру

[nerv_]

1. Использовать {{::value}} синтаксис, когда нет необходимости обновлять данные (доступно в 1.3.0 beta)

не факт, что в stable будет эта возможность

2. Делать больше DOM манипуляций в директиве

Или неудачный пример... или... в чем смысл? Все равно watcher вешать и делать тоже самое, что и директивы ng-show|ng-hide. Т.е. выигрыша нет.

4. В часто вызываемых функциях mousemove, mouseover, mouseout и т.п. не использовать лишний раз $apply или $digest

уже писали)

---

сразу писать по-человечески?)

научи =)

[melky]

научи =)

Node.appendChild

Node.insertAdjacentHTML

... всему вас нужно учить


PS вообще, ни разу ещё не страдал от фильтров в DOM (профилирование, йопт)

больше всего ненавижу ng-view (или ui-view) или ng-repeat. и ещё $watch - обычно вырубаю его , где могу (т.е. где оно не нужно... а оно не нужно много где)

[FireVolkhov]

Или неудачный пример... или... в чем смысл? Все равно watcher вешать и делать тоже самое, что и директивы ng-show|ng-hide. Т.е. выигрыша нет.

Да пример может не совсем удачный вот другой, суть выходит сводится к "использовать минимум watcher'ов", стараться не использовать watcher для коммуникаций внутри директивы, только для работы с другими директивами, контроллерами, сервисами.

[nerv_]

Да пример может не совсем удачный вот другой

При таком примере "теряется" MVC - так я не могу управлять видимостью из модели. На мой взгляд ценность такой директивы невелика)

Кроме того

content.toggleClass('ng-hide', !show);

[STEVER]

я вот тут статью в тему перевел - "Оптимизируем AngularJS. Подробный разбор."
от Глеба Бахмутова

[FireVolkhov]

nerv_,

Сообщение от FireVolkhov

1. Использовать {{::value}} синтаксис, когда нет необходимости обновлять данные (доступно в 1.3.0 beta)

не факт, что в stable будет эта возможность

Стало частью stable можно дописывать

UPD:
Не делать многократного вложение директив в директивы, если нужна повторяющаяся логика использовать вложенные контроллеры

angular.module '...'
	.directive 'dateTextfield', ($controller, ...) ->
		link: (scope, elem, attrs) ->
			commonHintCtrl = $controller 'CommonHintCtrl',
				$scope: scope
				...

[mikekelvin]

Angular performance optimization works well when we use lazy modules, lazy modules helps to break the large chunks of codes into small so Angular JS would be optimized.