6

Sempre que vejo algum artigo na internet sobre como otimizar o tempo de renderização do ng-repeat, vejo comentários a respeito da opção track by.

Exemplo:

<div ng-repeat="task in tasks track by task.id"></div>

Pelo que entendi, o track by faz uma espécie de identificação por índice na iteração.

Mas por que exatamente se costuma dizer que track by melhora a performance do ng-repeat?

Existe algum impacto negativo de se usar ng-repeat com track by ao invés de usar apenas o ng-repeat "puro"?

1 Resposta 1

3

Sempre que tu tens um track by que identifique a linha, ao atualizar seus dados, você não precisa recriar todo o DOM, aqueles que já estão devidamente identificados e existirem na atualização simplesmente serão ignorados.

Best Practice: If you are working with objects that have a unique identifier property, you should track by this identifier instead of the object instance, e.g. item in items track by item.id. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance.

Ainda, mesmo que tu não defina um track by, implicitamente é usado um $$hashKey único para cada item.

Default tracking: $id(): item in items is equivalent to item in items track by $id(item). This implies that the DOM elements will be associated by item identity in the collection.

Em termos práticos, track by padrão é o mesmo que recriar tudo do zero caso tua lista se atualize, uma vez que não há nada que identifique seu conteúdo inserido como existente, mesmo que idêntico aos que já estavam na lista, e com uma propriedade única esse retrabalho não existe, uma vez que só o que não está efetivamente na tua lista será inserido.

Fontes:

https://docs.angularjs.org/api/ng/directive/ngRepeat

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .