JavaScript
Explica cómo aparecen fugas de memoria por listeners, timers, closures y referencias retenidas, y cómo liberar recursos al cerrar cada ciclo de vida.
En scripts no estrictos:
function save(value) {
leakedValue = value;
}Puede crear una propiedad global y conservar datos durante toda la sesión.
Módulos y strict mode convierten esta asignación en error.
const cache = new Map();
function remember(key, value) {
cache.set(key, value);
}Si las claves nunca se retiran, la cache es almacenamiento permanente.
Define:
function mount() {
window.addEventListener("resize", updateLayout);
}Llamar mount varias veces registra varias callbacks.
function mount() {
const controller = new AbortController();
window.addEventListener("resize", updateLayout, {
signal: controller.signal,
});
return () => controller.abort();
}button.addEventListener("click", () => save());No puedes retirarlo después sin conservar la referencia o utilizar signal.
const intervalId = setInterval(refresh, 1000);Un interval olvidado puede seguir ejecutando trabajo y reteniendo closures.
clearInterval(intervalId);const observer = new ResizeObserver(updateLayout);
observer.observe(element);Cleanup:
observer.disconnect();Aplica también a MutationObserver e IntersectionObserver.
const unsubscribe = store.subscribe(listener);Quien se suscribe debe conocer cuándo llamar unsubscribe.
Una API que retorna cleanup hace visible el ciclo de vida.
function createHandler() {
const dataset = loadLargeDataset();
return () => {
console.log(dataset.length);
};
}Si solo necesitas la longitud:
function createHandler() {
const length = loadLargeDataset().length;
return () => console.log(length);
}No optimices closures por reflejo; identifica qué binding realmente mantiene una estructura grande.
const removedPanels = [];
function removePanel(panel) {
panel.remove();
removedPanels.push(panel);
}La colección conserva cada nodo retirado.
const url = URL.createObjectURL(file);
image.src = url;Cuando deja de usarse:
URL.revokeObjectURL(url);No revoques antes de que el consumidor termine.
const worker = new Worker("worker.js");Debe terminarse cuando su tiempo de vida no coincide con toda la aplicación.
worker.terminate();const reader = response.body.getReader();Si abandonas lectura, libera el lock o cancela cuando corresponda.
await reader.cancel();
reader.releaseLock();function startFeature() {
const controller = new AbortController();
const { signal } = controller;
window.addEventListener("resize", onResize, {
signal,
});
button.addEventListener("click", onClick, {
signal,
});
void loadData({ signal }).catch(handleAbortOrError);
return () => controller.abort();
}Una señal coordina listeners y operaciones cancelables.
Para recursos importantes:
const connection = await openConnection();
try {
await useConnection(connection);
} finally {
await connection.close();
}No dependas del garbage collector para liberar recursos externos.
El lenguaje moderno define símbolos y sintaxis de disposición para recursos que implementan contratos apropiados.
using resource = createDisposable();await using resource = await createAsyncDisposable();El soporte depende del runtime y tooling objetivo. El principio es que el scope controla la disposición, no el momento del GC.
Cambiar una Map por WeakMap solo funciona cuando:
No soluciona timers, listeners o caches por ID string.
La ruta de retención muestra qué referencia mantiene vivo el objeto.
function mountProductPanel(element) {
const controller = new AbortController();
const observer = new ResizeObserver(updateLayout);
const worker = new Worker("search-worker.js");
observer.observe(element);
window.addEventListener("keydown", handleKeydown, {
signal: controller.signal,
});
return () => {
controller.abort();
observer.disconnect();
worker.terminate();
};
}Cada recurso tiene una ruta de cierre.
¿Por qué WeakMap no soluciona una cache indexada por IDs string?
Porque WeakMap necesita claves débiles como objetos admitidos y no sirve para enumerar o gestionar una cache por claves primitivas.
Rendimiento y capacidad de respuesta diferencia velocidad total, latencia y fluidez de la interfaz.