Memory Leak em javaScript

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