La gestió de memòria és un aspecte crucial en el desenvolupament de programari, especialment en llenguatges com JavaScript, on la gestió de memòria és automàtica però no sempre òptima. En aquesta secció, explorarem com JavaScript gestiona la memòria, com podem identificar problemes de memòria i quines tècniques podem utilitzar per optimitzar l'ús de memòria en les nostres aplicacions.

• Variables i Tipus de Dades: Quan declarem una variable, JavaScript assigna memòria per emmagatzemar el valor de la variable.
• Objectes i Arrays: La memòria per a objectes i arrays es gestiona de manera dinàmica, és a dir, es pot expandir o reduir segons sigui necessari.

• Algorisme de Marcació i Escombratge (Mark-and-Sweep): JavaScript utilitza aquest algorisme per identificar i alliberar memòria que ja no és accessible.
• Cicles de Vida dels Objectes: Els objectes es mantenen en memòria mentre hi hagi referències a ells. Quan ja no hi ha referències, es marquen per a la recollida d'escombraries.

• Referències No Alliberades: Quan les referències a objectes no es netegen correctament, aquests objectes no es poden recollir i la memòria no es recupera.
• Variables Globals: Les variables globals es mantenen en memòria durant tota la vida de l'aplicació, cosa que pot causar fuites de memòria si no es gestionen adequadament.

• Chrome DevTools: Proporciona eines per monitoritzar l'ús de memòria i identificar fuites de memòria.
• Heap Snapshots: Permet capturar l'estat de la memòria en un moment determinat i comparar diferents snapshots per identificar increments inesperats en l'ús de memòria.

• Performance Monitor: Permet veure l'ús de memòria en temps real.
• Timeline: Permet veure com l'ús de memòria canvia amb el temps i identificar pics inusuals.

• Encapsulament: Utilitzar funcions i mòduls per encapsular variables i evitar l'ús de variables globals.
• Closures: Utilitzar closures per mantenir variables dins de l'àmbit local.

• Neteja de Referències: Assegurar-se de netejar referències a objectes quan ja no són necessàries.
• Event Listeners: Eliminar listeners d'esdeveniments quan ja no són necessaris per evitar referències no desitjades.

• Reutilització d'Objectes: Reutilitzar objectes i arrays en lloc de crear-ne de nous constantment.
• Redimensionament d'Arrays: Evitar redimensionar arrays freqüentment, ja que això pot causar una fragmentació de la memòria.

A continuació, es mostra un exemple pràctic de com identificar i solucionar una fuita de memòria utilitzant Chrome DevTools.

• createElements: Crea 1000 elements div i els afegeix a l'array elements cada segon.
• clearElements: Neteja l'array elements cada 5 segons.

1. Heap Snapshot: Captura un snapshot abans i després de diverses execucions de createElements i clearElements.
2. Comparació de Snapshots: Compara els snapshots per veure si hi ha un increment constant en l'ús de memòria.

• Eliminar Elements del DOM: Assegurar-se que els elements es retiren del DOM abans de netejar l'array.

En aquesta secció, hem après com JavaScript gestiona la memòria, com identificar problemes de memòria i quines tècniques podem utilitzar per optimitzar l'ús de memòria en les nostres aplicacions. La gestió eficient de la memòria és crucial per assegurar que les nostres aplicacions siguin ràpides i responsives, especialment a mesura que creixen en complexitat i ús.