Memory Leak em javaScript

Transcript

1. Memory Leak em javaScript @gpantuza http://pantuza.com http://github.com/pantuza
2. Memory Leak
3. 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
4. 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
5. Stack de Variáveis
6. Heap de Memória
7. Interpretador
8. Interpretador
9. Interpretador ▪ Alocação de memória ◦ Alocação dinâmica de memória ◦ Fracamente tipada
10. Interpretador ▪ Alocação de memória Lvalue Rvalue
11. Interpretador ▪ Alocação de memória ◦ Alocação por ponteiros (referência)
12. Interpretador ▪ Alocação de memória
13. Interpretador ▪ Alocação de memória ◦ Elementos de arrays são referências não nomeadas
14. Interpretador ▪ Alocação de memória
15. Interpretador ▪ Alocação de memória ◦ Alocação por tipo de dado (In-Object slack tracking) ◦ Novas propriedades apontam pra um array (overflow array)
16. Interpretador ▪ Alocação de memória
17. Interpretador ▪ Alocação de memória ◦ Funções são objetos callable ◦ Funções adicionam contexto (this, arguments, return)
18. Interpretador ▪ Alocação de memória
19. Interpretador ▪ Alocação de memória ◦ Referência Cíclica
20. Interpretador ▪ Alocação de memória
21. Interpretador ▪ Alocação de memória ◦ Alocação Estática de memória ◦ null !== undefined
22. Interpretador ▪ Alocação de memória V8 objects.h - https://code.google.com/p/v8/source/browse/trunk/src/objects.h? r=12408#7887
23. Interpretador ▪ Hoisting
24. Interpretador ▪ Hoisting ◦ Escopo por função e não por bloco
25. Interpretador ▪ Hoisting
26. Interpretador ▪ Hoisting
27. Interpretador ▪ Hoisting ◦ Declaração de variáveis sempre ocorre no início da função
28. Interpretador ▪ Hoisting
29. Interpretador ▪ Hoisting
30. Interpretador ▪ Hoisting ◦ Funções também estão suscetíveis a hoisting
31. Interpretador ▪ Hoisting
32. Garbage Collector
33. 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
34. Garbage Collector ▪ Ciclo de vida
35. Garbage Collector ▪ Ciclo de vida
36. Garbage Collector ▪ Ciclo de vida
37. Garbage Collector ▪ Ciclo de vida
38. Garbage Collector ▪ Ciclo de vida
39. Garbage Collector ▪ Ciclo de vida
40. Garbage Collector ▪ Ciclo de vida
41. 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
42. Garbage Collector ▪ Referência Cíclica Mozilla- https://developer.mozilla.org/en-US/docs/JavaScript/Memory_Management
43. Garbage Collector ▪ Referência Cíclica
44. 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
45. Garbage Collector ▪ Visualização de coleta de lixo
46. Hands On ▪ Gera Memory Leak
47. Hands On ▪ Previne Memory Leak
48. Hands On ▪ Gera Closure Leak
49. Hands On ▪ Previne Closure Leak
50. Hands On ▪ Memory Leak em listener
51. Hands On ▪ Garbage Collection em manipulação de DOM
52. Hands On ▪ Garbage Collection em manipulação de DOM GCcall - memória coletada Número de elementos do DOM
53. 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
54. Problemas ▪ Navegadores com Interpretadores diferentes ▪ Implementações divergentes da especificação ▪ Sistemas Real Time ▪ Muito ajax com criação de DOM sem
55. Freak Out ▪ Crash
56. Freak Out
57. Freak Out ▪ Defcon 7
58. Freak Out ▪ Garbage Collector #CHATEADO
59. 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
60. 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
61. References ▪ http://www.ibm.com/developerworks/web/library/wa-memleak/ ▪ http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory- efficient-javascript/ ▪ https://developer.mozilla.org/en- US/docs/JavaScript/Memory_Management ▪ http://www.interworks.com/blogs/mgardner/2009/08/31/avoiding- memory-leaks-and-javascript-best-practices ▪ http://nesj.net/blog/2012/04/javascript-memory-leaks/ ▪ http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and- Hoisting
62. References ▪ http://www.reddit. com/r/programming/comments/16e1kh/gmails_javascript_garbage_colle ction_hacks/ ▪ https://medium.com/joys-of-javascript/6b1ea3ffca45 ▪ http://code.google.com/p/leak-finder-for-javascript/ ▪ http://www.javascriptkit.com/javatutors/closuresleak/index.shtml ▪ http://www.codeproject.com/Articles/12231/Memory-Leakage-in- Internet-Explorer-revisited ▪ http://stackoverflow.com/questions/14034107/does-javascript- setinterval-method-cause-memory-leak/
63. Perguntas? @gpantuza http://pantuza.com http://github.com/pantuza
64. Obrigado : )