Heap i upravljanje memorijom u JavaScript-u

Heap i upravljanje skladištem u JavaScript-u

Upravljanje memorijom se značajno razlikuje među različitim programskim jezicima. U jezicima niskog nivoa kao što su C ili C++, programeri moraju njome upravljati ručno.

S druge strane, u jezicima visokog nivoa kao što su JavaScript, Python ili C#, upravljanje memorijom je automatsko. To znači da se prostor dinamički dodeljuje dok je potreban i automatski oslobađa kada više nije neophodan, zahvaljujući procesu poznatom kao Garbage Collection (sakupljanje otpada). Međutim, u potonjim se mogu javiti problemi poput curenja memorije (memory leaks), koji rezultiraju preopterećenjem memorije. U ovom članku ćemo istražiti kako pristupiti ovim problemima, ali pre toga je ključno razumeti kako oni funkcionišu.

Da bismo razumeli kako funkcioniše, prvo moramo razumeti tipove podataka koji se koriste u JavaScript-u.

Tipovi podataka u JavaScript-u

Primitivni tipovi: Ovi podaci se skladište direktno u steku (stack).

String | Number | Boolean | Null | Undefined | Symbol | Bigint

Referentni tipovi: Skladište se u hipu (heap) i pristupa im se putem referenci.

Array | Function | Objects

Produbićemo razlike na konkretnom primeru:

let name = "José";
let age = 40;
let person = {
	name: "Pablo",
	age: 30,
};

let newName = name;
newName = "Lázaro";

let newPerson = person;
newPerson.name = "Jesús";

console.log(name);
console.log(person);
console.log(newName);
console.log(newPerson);

José
{ name: "Jesús", age: 30 }
Lázaro
{ name: "Jesús", age: 30 }

Primećuje se da primitivna varijabla 'name', sa vrednošću "José", zadržava svoju originalnu vrednost uprkos tome što je dodeljena varijabli 'newName' i prebrisana vrednošću "Lázaro". S druge strane, prilikom izvođenja iste operacije sa objektom 'person', vrednost imena se menja u obe varijable. To je zato što se ne kreira nezavisna kopija, već se podacima pristupa putem reference.

Curenje memorije (Memory Leak)

Jedan od najmoćnijih alata za otkrivanje curenja memorije u veb aplikacijama je skup razvojnih alata integrisanih u pregledače. Konkretno, DevTools nude specifične funkcionalnosti za praćenje korišćenja memorije. Da bismo otkrili curenje memorije, možemo koristiti karticu "Memory" (Memorija) u DevTools-u, gde možemo posmatrati neočekivani rast potrošnje memorije tokom određenih vremenskih perioda ili akcija korisnika. Na primer, ako primetimo konstantno povećanje upotrebe memorije nakon učitavanja stranice ili obavljanja određenih interakcija, to bi moglo ukazivati na moguće curenje memorije. Pored toga, DevTools obično pružaju alate za detaljniju analizu, kao što je uzimanje profila memorije i vizuelizacija zadržavanja memorije od strane objekata i DOM elemenata. Ispod je prikazan snimak ekrana DevTools-a sa primerom curenja memorije, gde se može uočiti konstantno povećanje upotrebe memorije nakon određenih akcija na veb stranici.