Memory leak in Javascript - Renan Bastos Tchelinux 2018 Porto Alegre

1. Memory Leak in
JavaScript

2. Renan Bastos!
Analista e Desenvolvedor de Software
na AZION TECHNOLOGIES
@renanbastos93
2

3. Memory Life cycle
Tempo de vida de cada alocação de memória.
💣

4. “
Alocando memória
4
var num = 25;
var str = 'Renan';
var arr = [1, null, 'tree'];
var obj = {
k1: 1993,
k2: null
};
function fun(num) {
return num + 2;
}
someElement.addEventListener('click', function() {
someElement.style.backgroundColor = 'blue';
}, false);

5. “
Referência de Memória
5
var firstObject = {
key: "value"
};
var otherObject = firstObject;
console.log(firstObject == otherObject);
// TRUE

6. Garbage Collector
◇ O que é?
◇ Para que serve?
◇ Como funciona?
6

7. Exemplo:
7
var someArray = [];
function createSomeNodes() {
var div;
var frag = document.createDocumentFragment();
for (var i=100; i > 0; i--) {
div = document.createElement("div");
div.appendChild(document.createTextNode(i + " - "+ new Date().toTimeString()));
frag.appendChild(div);
}
document.getElementById("nodes").appendChild(frag);
}
function grow() {
someArray.push(new Array(1000000).join('x'));
createSomeNodes();
setTimeout(grow,1000);
}

8. Ilustrando o Memory Leak
8

9. 9

10. 10

11. Como evitar esse
problema?
◇ Remover variável inutilizada
◇ Remover referência de memória
11

12. Exemplo:
12
var firstObj = {event: "TcheLinux"};
var letsGoEvent = firstObj;
function appendRefInArray(){
for(var i=0; i<1000000; i++){
this["ref" + i] = Object.create(letsGoEvent);
}
console.log(this["ref0"] == this["ref1"]);
console.log(firstObj == this["ref0"]);
}
letsGoEvent = null;
firstObj.using = true;
delete firstObj.using ;

13. Referências
https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/
https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
https://javascript.info/garbage-collection
https://developers.google.com/web/tools/chrome-devtools/memory-problems/
13

14. Obrigado!
Qualquer dúvida?
Contate-me:
◇ @renanbastos93
◇ renanbastos.tec@gmail.com
14