Gerenciamento de Memória e Garbage Collection no JS

Esta apresentação apresenta as principais diferenças entre linguagens de programação com gerenciamento explícito/manual de memória e aqueles onde ele é feito automaticamente. Apresenta também o conceito de Garbage Collection, ressaltando a necessidade de ainda assim se preocupar com como a memória é utilizada, por exemplo evitando os "vazamentos de memória".

Transcript

1. Gerenciamento de Memória e Garbage Collection no JS Leonardo Soares Zuin Desenvolvedor FrontEnd Sr.
2. Agenda • Life cycle da memória; • Garbage collection; • Memory leaks; • Conclusão.
3. Life cycle da memória • As fases de alocação e liberação são explícitas em linguagens de baixo nível (como o C) e implícitas nas de alto nível (como o JS).
4. Gerenciamento baixo nível • No exemplo ao lado, feito em C, são usados os métodos malloc e free; • malloc: abreviação para "memory allocation" (alocação de memória), determina que o valor deve ser alocado em memória; • free: método libera o espaço de memória ocupado pela variável; • Essa responsabilidade fica sob o desenvolvedor, o C não realiza gerenciamento automatizado de memória; • Reflexão: imagine suas atividades diárias com JS. Se você precisasse usar métodos como malloc e free para gerenciar suas variáveis, o quão mais complexo seria?
5. Gerenciamento alto nível • Já neste exemplo, com JavaScript, o gerenciamento da memória é feito de forma automatizada; • Ao declarar uma variável e atribuir valor a ela, a memória é alocada de forma automática; • Quando aquela variável não for mais consumida pela aplicação, a memória é liberada automaticamente; • O processo todo é transparente para o desenvolvedor. Mas isso NÃO quer dizer que não seja preciso se preocupar com a memória!
6. Memory Leaks • Um "vazamento de memória" (memory leak) ocorre quando um objeto não é mais usado, mas é referenciado de alguma forma que o GB (Garbage Collector) não consegue removê-lo
7. Memory Leaks Botão para selecionar andar é pressionado 1. Aloque memória para reservar qual andar foi pressionado 2. Insira o número do andar na memória alocada 3. O andar atual é o andar pressionado? o Se sim, não faça nada e finalize o processo <<--- Vazamento de memória!!! 4. Vá ao andar selecionado 5. Libere a memória usada para reservar o andar selecionado No passo 3, deveríamos executar o mesmo que o passo 5
8. Memory Leaks Há algumas maneiras que um vazamento de memória pode ocorrer, vamos falar dos seguintes casos: • Variáveis globais e referências esquecidas • Event listeners • Timers e Intervals mantendo referências
9. Memory Leaks Variáveis globais e referências esquecidas Variáveis globais ficam na memória até que a aplicação inteira finalize
10. Memory Leaks Event Listeners O listener ficará na memória mesmo após useScroll não ser mais usado
11. Memory Leaks Timers e Intervals mantendo referências Mesmo que o hook não seja mais usado, o browser seguirá alocando memória para o temporizador
12. Conclusão • Em linguagens de alto nível, como o JS, não precisamos nos preocupar com o gerenciamento da memória; • Mas DEVEMOS nos preocupar com o bom uso deste gerenciamento; • Boas práticas pensadas em performance são essenciais para usufruir de mecanismos como o Garbage Collector.
13. Agradecimentos e contato • LinkedIn: https://www.linkedin.com/in/lzuin/
14. Referências • https://developer.mozilla.org/en- US/docs/Web/JavaScript/Guide/Memory_manag ement • https://medium.com/@simplycodesmart/under standing-and-preventing-memory-leaks-in- javascript-1a6fc5d9f4f5 • https://en.wikipedia.org/wiki/Memory_leak