$30 off During Our Annual Pro Sale. View Details »

Memory Leak em javaScript

Memory Leak em javaScript

Gustavo Pantuza

March 02, 2013
Tweet

More Decks by Gustavo Pantuza

Other Decks in Programming

Transcript

  1. Memory Leak em
    javaScript
    @gpantuza
    http://pantuza.com
    http://github.com/pantuza

    View Slide

  2. Memory Leak

    View Slide

  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

    View Slide

  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

    View Slide

  5. Stack de Variáveis

    View Slide

  6. Heap de Memória

    View Slide

  7. Interpretador

    View Slide

  8. Interpretador

    View Slide

  9. Interpretador
    ■ Alocação de memória
    ○ Alocação dinâmica de memória
    ○ Fracamente tipada

    View Slide

  10. Interpretador
    ■ Alocação de memória
    Lvalue Rvalue

    View Slide

  11. Interpretador
    ■ Alocação de memória
    ○ Alocação por ponteiros (referência)

    View Slide

  12. Interpretador
    ■ Alocação de memória

    View Slide

  13. Interpretador
    ■ Alocação de memória
    ○ Elementos de arrays são referências não nomeadas

    View Slide

  14. Interpretador
    ■ Alocação de memória

    View Slide

  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)

    View Slide

  16. Interpretador
    ■ Alocação de memória

    View Slide

  17. Interpretador
    ■ Alocação de memória
    ○ Funções são objetos callable
    ○ Funções adicionam contexto (this, arguments,
    return)

    View Slide

  18. Interpretador
    ■ Alocação de memória

    View Slide

  19. Interpretador
    ■ Alocação de memória
    ○ Referência Cíclica

    View Slide

  20. Interpretador
    ■ Alocação de memória

    View Slide

  21. Interpretador
    ■ Alocação de memória
    ○ Alocação Estática de memória
    ○ null !== undefined

    View Slide

  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

    View Slide

  23. Interpretador
    ■ Hoisting

    View Slide

  24. Interpretador
    ■ Hoisting
    ○ Escopo por função e não por bloco

    View Slide

  25. Interpretador
    ■ Hoisting

    View Slide

  26. Interpretador
    ■ Hoisting

    View Slide

  27. Interpretador
    ■ Hoisting
    ○ Declaração de variáveis sempre ocorre no início da
    função

    View Slide

  28. Interpretador
    ■ Hoisting

    View Slide

  29. Interpretador
    ■ Hoisting

    View Slide

  30. Interpretador
    ■ Hoisting
    ○ Funções também estão suscetíveis a hoisting

    View Slide

  31. Interpretador
    ■ Hoisting

    View Slide

  32. Garbage Collector

    View Slide

  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

    View Slide

  34. Garbage Collector
    ■ Ciclo de vida

    View Slide

  35. Garbage Collector
    ■ Ciclo de vida

    View Slide

  36. Garbage Collector
    ■ Ciclo de vida

    View Slide

  37. Garbage Collector
    ■ Ciclo de vida

    View Slide

  38. Garbage Collector
    ■ Ciclo de vida

    View Slide

  39. Garbage Collector
    ■ Ciclo de vida

    View Slide

  40. Garbage Collector
    ■ Ciclo de vida

    View Slide

  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

    View Slide

  42. Garbage Collector
    ■ Referência Cíclica
    Mozilla- https://developer.mozilla.org/en-US/docs/JavaScript/Memory_Management

    View Slide

  43. Garbage Collector
    ■ Referência Cíclica

    View Slide

  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

    View Slide

  45. Garbage Collector
    ■ Visualização de coleta de lixo

    View Slide

  46. Hands On
    ■ Gera Memory Leak

    View Slide

  47. Hands On
    ■ Previne Memory Leak

    View Slide

  48. Hands On
    ■ Gera Closure Leak

    View Slide

  49. Hands On
    ■ Previne Closure Leak

    View Slide

  50. Hands On
    ■ Memory Leak em listener

    View Slide

  51. Hands On
    ■ Garbage Collection em manipulação de DOM

    View Slide

  52. Hands On
    ■ Garbage Collection em manipulação de DOM
    GCcall - memória coletada
    Número de elementos do DOM

    View Slide

  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

    View Slide

  54. Problemas
    ■ Navegadores com Interpretadores
    diferentes
    ■ Implementações divergentes da
    especificação
    ■ Sistemas Real Time
    ■ Muito ajax com criação de DOM sem

    View Slide

  55. Freak Out
    ■ Crash

    View Slide

  56. Freak Out

    View Slide

  57. Freak Out
    ■ Defcon 7

    View Slide

  58. Freak Out
    ■ Garbage Collector #CHATEADO

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  63. Perguntas?
    @gpantuza
    http://pantuza.com
    http://github.com/pantuza

    View Slide

  64. Obrigado : )

    View Slide