Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Angular: Performance optimization / Оптимизация производительности (https://javascript.ru/forum/angular/42001-angular-performance-optimization-optimizaciya-proizvoditelnosti.html)

nerv_ 09.10.2013 01:02

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

В этой теме хотелось бы обсудить вопрос оптимизации производительности в ангуляре: как правильно писать код; чего следовало бы избегать; рецепты оптимизации производительности и т.п.

---

Ниже выжимка из всей темы

СОВЕТЫ ПО ОПТИМИЗАЦИИ ПРОИЗВОДИТЕЛЬНОСТИ

расширенное объяснение по каждому пункту можно найти почитав тему
  1. Если возможно то не слушать объекты и массивы целиком
  2. Без крайней нужды не вешать WATCH на функции
  3. Не вызывать
    $scope.$apply();
    $scope.$digest();
    
    слишком часто (например, в обработчиках событий scroll или mousemove)
  4. Не выводить в
    <element ng-repeat="..."></element>
    
    тысячи элементов, а вывести первые элементы и сделать динамическую подгрузку
  5. Если элемент скрыт с помощью ng-show или ng-hide
    <element ng-show="false"></element>
    <element ng-hide="true"></element>
    
    и внутри него есть тяжелые вычисления, вероятно, имеет смыл использовать [ng-if|ng-switch] чтобы их избежать
  6. Использовать синтаксис
    <element ng-repeat="item in array track by $index"></element> или
    <element ng-repeat="item in array track by item.id"></element>
    
    вместо
    <element ng-repeat="item in array"></element>
    
    чтобы отслеживать изменения по индексу или id, а не по значению
  7. Обновлять текущий и вложенные скопы
    $scope.$digest();
    
    а не все приложение
    $scope.$apply();
    

DjDiablo 09.10.2013 04:14

Я уже касался частично.

По scope.
1) Если возможно то не слушать объекты и массивы целиком. (так как ангуляру нужно выполнить цикл по всем свойствам)
2) Без крайней нужды не вешать WATCH на функции. (они будут срабатывать при любом изменении scope)
3) Подозреваю что события могут быть быстрее чем watch в ряде ситуаций, но не проверял.


По шаблону.
Мне очень интересно как ведут себя директивы помещенный внутрь ngrepeat. Не получится ли так что каждая директива внутри цикла будет пересоздаваться когда ngrepeat срабатывает повторно. Я полагаю что так оно и есть, а это означает что нужно дважды подумать прежде чем пихать директивы внутрь ngrepeat. Впрочем с несколькими сотнями итераций проблем быть не должно, конечно только если вы не обновляете данные несколько раз в секунду :) А вот на мобиле ХЗ сколько потянет.

Ну и просто философия. :)
Никто нативные операции на дум не отменял, и jQuery пока жив :) Если директива тяжелая по производительности, то никто не обязывает вас использовать шаблоны и связывание. Вы можете просто переписать внутренности директивы на голом JS или jQuery и получить быструю и максимально оптимизированную директиву. Ну к примеру в шаблоне директивы есть ng-show, возможно вы сумеете заменить ее нативным .style.display который однозначно сработает быстрее.

nerv_ 09.10.2013 13:21

DjDiablo, спасибо.

Еще у меня вот такие мысли ng-if, ng-switсh etc. как способ оптимизации производительности. Что думаете по этому поводу?

Цитата:

Сообщение от DjDiablo
Не получится ли так что каждая директива внутри цикла будет пересоздаваться когда ngrepeat срабатывает повторно. Я полагаю что так оно и есть

думаю, так оно и есть (судя по поведению)

Цитата:

Сообщение от DjDiablo
Никто нативные операции на дум не отменял, и jQuery пока жив

тогда зачем ангуляр использовать? :)

DjDiablo 09.10.2013 13:52

Тест не честный чуточку :). Поместив test() в ngShow ты заставил срабатывать test при любом изменении, но это не означает что срабатывает сам ngShow. Test вызывается только для того чтобы оно вернуло true или false, и ngShow получив это значение мог правильно отработать. Если бы ты слушал свойство а не функцию test то ngShow срабатывал бы только при изменении свойства. NgShowController:Controller:test и NgIfController:Controller:test не должны были оказаться в консоли если бы выводились самим ngShow .

Иными словами в примере не все директивы при публикации срабатывают, срабатывают только функции которые указаны директивам в атрибутах. Даже если нерв ты знаешь это, я для других указываю, так как может неправильный вывод сделать из эксперимента.

Тем не менее ng-if это прикольная тема. Допустим в табах можно попробывать выключать содержимое невидимых закладок или чо нибудь в этом духе.

nerv_ 02.11.2013 15:13

Цитата:

Сообщение от DjDiablo
Тест не честный чуточку

а у меня честных тестов не бывает :D

Цитата:

Сообщение от DjDiablo
Допустим в табах можно попробывать выключать содержимое невидимых закладок или чо нибудь в этом духе.

или, например, при пагинации на клиенте или любые другие "не нужные" в данный момент куски разметки вместе с кодом

Об очевидном. Еще лучше не делать так:
element.bind( 'mousemove scroll ...', function() {
    $scope.$apply(function() { /* code here */ );
});

не вызывать пересчет скопа каждый раз в событиях, которые срабатывают достаточно часто, а по возможности использовать прокси

Shitbox2 05.11.2013 12:32

Не выводить в ng-repeat тысячи элементов, а сделать динамическую подгрузку и выгрузку первых элементов (как чат вконтакте). Тогда и с оптимизацией директивы можно не париться)

De-Luxis 07.11.2013 16:27

Цитата:

Сообщение от Shitbox2 (Сообщение 279596)
Не выводить в ng-repeat тысячи элементов, а сделать динамическую подгрузку и выгрузку первых элементов (как чат вконтакте). Тогда и с оптимизацией директивы можно не париться)

Ограничиваю список через фильтр. Этакий пэджинатор.
app.filter('startFrom', function() {
		return function(input, start) {
			start = parseInt(start);
			return input.slice(start);
		}
	})


И пишу в html:
<button ng-repeat="(n, button) in selectorField.items | startFrom:(currentPage - 1) * limit | limitTo:limit" ng-mousedown="setSelector(n)" ng-bind-html-unsafe="button.title"></button>


Но сотнях не тестировал, но работает шустро. Что думаете?

Shitbox2 09.11.2013 20:53

Цитата:

Что думаете?
Надо потестить)

Чуть не забыл. Еще одна фишка для оптимизации.
тыц1 и тыц2.

Суть в том, что вешать события на $rootScope нужно внимательно, т. к. при удалении шаблона с контроллером корневая область видимости никуда не девается и обработчик остается.

nerv_, посмотри в своем загрузчике файлов, кажется у тебя там именно такая ситуация. Т.е. если я закрою страничку загрузки файлов, то все обработчики так и останутся на $rootScope

nerv_ 09.11.2013 23:57

Цитата:

Сообщение от Shitbox2
nerv_, посмотри в своем загрузчике файлов, кажется у тебя там именно такая ситуация. Т.е. если я закрою страничку загрузки файлов, то все обработчики так и останутся на $rootScope

спасибо. У меня это как раз на стадии обсуждения.

Ознакомился со статьей. Что могу сказать, если речь идет о роутах, то есть события, позволяющие отловить изменения маршрута. Я так уже делал, останавливал setInteral, который крутился на странице. Т.к., если его не остановить, знаешь, что будет :)

С ui-router не работал также как и с angular route segment

Shitbox2 10.11.2013 15:24

А можно просто сделать колбеками, как у меня))

Поработай с ui-router — классная штука. Единственное, что использую от сторонних ангуляр-разработчиков) Почти всю документацию перевел


Часовой пояс GMT +3, время: 08:17.