Memory Leak em
javaScript
@gpantuza
http://pantuza.com
http://github.com/pantuza
Slide 2
Slide 2 text
Memory Leak
Slide 3
Slide 3 text
Memory Leak
■ "... deixar de remover dados que não
podem ser referenciados, o que é
chamado de erro de vazamento de
memória (memory leak) ..."
Livro - http://www.amazon.com/Compilers-Principles-Techniques-Tools-2nd/dp/0321486811
Slide 4
Slide 4 text
Memory Leak
■ "... quando uma porção de memória,
alocada para uma determinada operação,
não é liberada quando não é mais
necessária"
Wikipedia - http://pt.wikipedia.org/wiki/Vazamento_de_memória
Slide 5
Slide 5 text
Stack de Variáveis
Slide 6
Slide 6 text
Heap de Memória
Slide 7
Slide 7 text
Interpretador
Slide 8
Slide 8 text
Interpretador
Slide 9
Slide 9 text
Interpretador
■ Alocação de memória
○ Alocação dinâmica de memória
○ Fracamente tipada
Slide 10
Slide 10 text
Interpretador
■ Alocação de memória
Lvalue Rvalue
Slide 11
Slide 11 text
Interpretador
■ Alocação de memória
○ Alocação por ponteiros (referência)
Slide 12
Slide 12 text
Interpretador
■ Alocação de memória
Slide 13
Slide 13 text
Interpretador
■ Alocação de memória
○ Elementos de arrays são referências não nomeadas
Slide 14
Slide 14 text
Interpretador
■ Alocação de memória
Slide 15
Slide 15 text
Interpretador
■ Alocação de memória
○ Alocação por tipo de dado (In-Object slack
tracking)
○ Novas propriedades apontam pra um array
(overflow array)
Slide 16
Slide 16 text
Interpretador
■ Alocação de memória
Slide 17
Slide 17 text
Interpretador
■ Alocação de memória
○ Funções são objetos callable
○ Funções adicionam contexto (this, arguments,
return)
Slide 18
Slide 18 text
Interpretador
■ Alocação de memória
Slide 19
Slide 19 text
Interpretador
■ Alocação de memória
○ Referência Cíclica
Slide 20
Slide 20 text
Interpretador
■ Alocação de memória
Slide 21
Slide 21 text
Interpretador
■ Alocação de memória
○ Alocação Estática de memória
○ null !== undefined
Slide 22
Slide 22 text
Interpretador
■ Alocação de memória
V8 objects.h - https://code.google.com/p/v8/source/browse/trunk/src/objects.h?
r=12408#7887
Slide 23
Slide 23 text
Interpretador
■ Hoisting
Slide 24
Slide 24 text
Interpretador
■ Hoisting
○ Escopo por função e não por bloco
Slide 25
Slide 25 text
Interpretador
■ Hoisting
Slide 26
Slide 26 text
Interpretador
■ Hoisting
Slide 27
Slide 27 text
Interpretador
■ Hoisting
○ Declaração de variáveis sempre ocorre no início da
função
Slide 28
Slide 28 text
Interpretador
■ Hoisting
Slide 29
Slide 29 text
Interpretador
■ Hoisting
Slide 30
Slide 30 text
Interpretador
■ Hoisting
○ Funções também estão suscetíveis a hoisting
Slide 31
Slide 31 text
Interpretador
■ Hoisting
Slide 32
Slide 32 text
Garbage Collector
Slide 33
Slide 33 text
Garbage Collector
■ "A coleta de lixo é a reivindicação de
porções de memória contendo objetos
que não podem mais ser acessados por um
programa"
Livro - http://www.amazon.com/Compilers-Principles-Techniques-Tools-2nd/dp/0321486811
Slide 34
Slide 34 text
Garbage Collector
■ Ciclo de vida
Slide 35
Slide 35 text
Garbage Collector
■ Ciclo de vida
Slide 36
Slide 36 text
Garbage Collector
■ Ciclo de vida
Slide 37
Slide 37 text
Garbage Collector
■ Ciclo de vida
Slide 38
Slide 38 text
Garbage Collector
■ Ciclo de vida
Slide 39
Slide 39 text
Garbage Collector
■ Ciclo de vida
Slide 40
Slide 40 text
Garbage Collector
■ Ciclo de vida
Slide 41
Slide 41 text
Garbage Collector
■ Para a execução durante um ciclo de coleta
■ Coleta de lixo com Pausa Curta
■ Evita o estilo 'pare o mundo'
■ Sabe onde todos objetos estão na memória
■ Previne Memory Leaks
Design Elements - https://developers.google.com/v8/design#garb_coll
Garbage Collector
■ Algoritmo Mark-and-sweep
○ Mede alcançabilidade
○ Define objetos roots (objetos globais)
○ Parte da raíz buscando todos objetos alcançáveis
○ Objetos com referência e não alcançáveis são
coletados
Slide 45
Slide 45 text
Garbage Collector
■ Visualização de coleta de lixo
Slide 46
Slide 46 text
Hands On
■ Gera Memory Leak
Slide 47
Slide 47 text
Hands On
■ Previne Memory Leak
Slide 48
Slide 48 text
Hands On
■ Gera Closure Leak
Slide 49
Slide 49 text
Hands On
■ Previne Closure Leak
Slide 50
Slide 50 text
Hands On
■ Memory Leak em listener
Slide 51
Slide 51 text
Hands On
■ Garbage Collection em manipulação de DOM
Slide 52
Slide 52 text
Hands On
■ Garbage Collection em manipulação de DOM
GCcall - memória coletada
Número de elementos do DOM
Slide 53
Slide 53 text
Boas Práticas
■ Evite associar objetos Javascript a objetos
do DOM
■ Sempre remova os eventos/objetos antes
de remover os objetos do DOM
■ Evite referenciar objetos globais dentro de
closures
Slide 54
Slide 54 text
Problemas
■ Navegadores com Interpretadores
diferentes
■ Implementações divergentes da
especificação
■ Sistemas Real Time
■ Muito ajax com criação de DOM sem
Slide 55
Slide 55 text
Freak Out
■ Crash
Slide 56
Slide 56 text
Freak Out
Slide 57
Slide 57 text
Freak Out
■ Defcon 7
Slide 58
Slide 58 text
Freak Out
■ Garbage Collector #CHATEADO
Slide 59
Slide 59 text
Ferramentas
■ Drip: IE Leak Detector
■ Leak Finder For Javascript - google code
■ Deep Memory Profiler - Chromium Projects
■ Aba 'Timeline' e 'Profiles' da ferramenta do
desenvolvedor no Chrome
Slide 60
Slide 60 text
Considerações Finais
■ Vivencie a cultura Hacker (investigue tudo)
■ Tire suas dúvidas na fonte (ECMA Script)
■ Entenda as frameworks, bibliotecas e plugins
■ Se envolva com software livre
■ Respire Computação