domingo, 5 de julho de 2015

Performance com AngularJS

Palestra da InfoQ que recomendo:

Alguns destaques:
* Use $emit em vez de $broadcast para troca de mensagens entre scopes
* Use two-way data binding somente quando realmente necessário, caso não seja, utilize one-way data binding. O one-way data-binding foi implementando na 1.3 e faz o valor ser renderizado uma só vez não sendo mais visitado pelo dirty checking. Para isso use ::, como em {{::valor}}. Tome cuidado somente ao usar one-way em valores dentro de um ng-repeat que possa vir a ser filtrado para não ter valores apresentados de forma incorreta.
* use ng-if em vez de ng-show. O ng-if inclui o elemento no DOM somente quando a condição for atendida enquanto que ng-show só oculta (display: none), com isso o dirty checking irá verificar o elemento com ng-show mais vezes do que com ng-if tendo um custo maior.
* use com moderação os filters, porque toda vez que um atributo two-way data binding é alterado o dirty checking repassa toda a árvore DOM revalidando todos os bindings. Sugestões aqui é já trazer o atributo já formatado ou manipular o array formatando-o usando o método map de Array (quando o filter foi utilizado para formatar) ou outra forma.
* nos ng-repeat utilize track by $index, isso irá otimizar o loop:
           ng-repeat="item in items track by $index"
* Uso de ng-model-options, também feature nova da 1.3, informa o tempo ou em que momento o model deve ser atualizado.

Veja também:
Exploring Angular 1.3: One-time bindings
Exploring Angular 1.3: ng-model-options