BrazilJS

Share this post
Como melhorar desempenho de uma aplicação Angular com OnPush
www.braziljs.org

Como melhorar desempenho de uma aplicação Angular com OnPush

Tiago Temporin
Feb 5, 2018
Comment
Share

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.

CommentComment
ShareShare

Create your profile

0 subscriptions will be displayed on your profile (edit)

Skip for now

Only paid subscribers can comment on this post

Already a paid subscriber? Sign in

Check your email

For your security, we need to re-authenticate you.

Click the link we sent to , or click here to sign in.

TopNewCommunity

No posts

Ready for more?

© 2022 BrazilJS
Privacy ∙ Terms ∙ Collection notice
Publish on Substack Get the app
Substack is the home for great writing