Como melhorar desempenho de uma aplicação Angular com OnPush
Change Detection é uma das principais funcionalidades do Angular, responsável por marcar os componentes quando um evento ocorre. Dessa forma, os componentes podem (caso implementem o evento) modificar a view.
Por padrão, o Angular trabalha de forma conservadora. Ou seja, quando ocorre um evento, todos os componentes são marcados para verificar se algo deve ser modificado nas views.
O desenho abaixo — sim, eu sou o artista plástico responsável pela obra de arte que você está preste a ver — ilustra o que acontece em uma aplicação Angular quando um evento ocorre.
change detection default
Por ter sido desenvolvido com foco em performance, o Angular consegue executar centenas de milhares de verificações por milissegundo. Mas, como não existe almoço grátis, isso acaba consumindo mais recursos do que é realmente necessário.
Para que isso não aconteça, podemos trabalhar com a estratégia do change detection no modo OnPush. Dessa forma, o componente passa a ser responsável por todos os eventos ocorridos nele mesmo, ignorando qualquer outro evento da aplicação.
Assim, quando um evento ocorre no componente, devemos utilizar o ChangeDetectorRef para marcar que houve uma mudança. Isso faz com que todo caminho até o componente seja marcado, para que os “pais” também sejam verificados e atualizados.
Veja a diferença.
change detection OnPush
Uma simples mudança, mas que traz bons ganhos em performance quando se trabalha com grandes aplicações.
Por fim, para facilitar o gerenciamento dos objetos dentro da aplicação, quando trabalharem com o change detection em OnPush, aconselho que os objetos sejam utilizados de forma imutável .
Objetos mutáveis trarão mais dores de cabeça do que solução quando trabalhamos dessa forma.