Memory Leak em javaScript

Memory Leak em javaScript

B1412c9ed55333c1df561f64dfad69d3?s=128

Gustavo Pantuza

March 02, 2013
Tweet

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 : )