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.
Create your profile
Only paid subscribers can comment on this post
Check your email
For your security, we need to re-authenticate you.
Click the link we sent to , or click here to sign in.