Angular Academy · Aula

Otimização de listas e renderização

Acelere listas grandes usando rastreamento.

Otimização de listas e renderização é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Por que a renderização de listas é importante

Listas são o ponto mais comum de perda de desempenho. Renderizar novamente uma lista inteira a cada mudança desperdiça trabalho e redefine o estado do DOM. O Angular oferece ferramentas para renderizá-las com eficiência.

O bloco @for

O fluxo de controle integrado @for exige uma expressão track para que o Angular possa identificar cada item entre as atualizações.

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
}

Por que track é obrigatório

Sem uma identidade estável, o Angular não consegue determinar quais itens foram movidos, adicionados ou removidos. track associa cada nó renderizado aos seus dados, permitindo reutilizar o DOM em vez de recriá-lo.

Rastreamento por identidade

Use uma chave exclusiva e estável, como um id. Evite track $index em listas que mudam de ordem, pois alterações no índice causam modificações desnecessárias no DOM.

@for (user of users(); track user.id) {
  <app-user-card [user]="user" />
}

Quando usar track $index

Se os itens não tiverem um id exclusivo e nunca mudarem de ordem (registros aos quais apenas se acrescentam itens), track $index será aceitável.

@for (line of logLines(); track $index) {
  <p>{{ line }}</p>
}

O trackBy legado

Com o *ngFor mais antigo, você fornece uma função trackBy que retorna uma chave estável.

trackById(index: number, item: Item) {
  return item.id;
}

trackBy no modelo

Faça referência à função na microssintaxe do *ngFor.

<li *ngFor="let item of items; trackBy: trackById">
  {{ item.name }}
</li>

Estados vazio e de carregamento

@for é compatível com um bloco @empty para quando a coleção estiver vazia, evitando verificações extras com *ngIf.

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items yet.</li>
}

Evite chamadas de funções em associações

As funções nos modelos são executadas a cada verificação. Pré-calcule os valores em signals ou campos memorizados, em vez de chamar métodos nos corpos de @for.

OnPush + listas imutáveis

Combine o OnPush com novas referências de array a cada mudança. Com um track adequado, o Angular atualiza apenas as linhas que realmente mudaram.

this.items.update(list => [...list, newItem]);

Rolagem virtual

Para listas muito grandes, renderize apenas as linhas visíveis com o CDK cdk-virtual-scroll-viewport, mantendo o DOM pequeno independentemente do tamanho dos dados.

<cdk-virtual-scroll-viewport itemSize="48">
  <div *cdkVirtualFor="let item of items">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

Verificação rápida

Teste sua compreensão da otimização de listas.

Recapitulação

Você aprendeu a otimizar listas com @for ... track (ou o trackBy legado), usando chaves estáveis, um bloco @empty, atualizações imutáveis com OnPush e rolagem virtual para coleções muito grandes.

Perguntas Frequentes

A aula “Otimização de listas e renderização” é grátis?

Sim — o texto completo de “Otimização de listas e renderização” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Otimização de listas e renderização”?

Acelere listas grandes usando rastreamento. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Otimização de listas e renderização”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy