Detached elements

Le scénario

Une interface peut disparaître sans être libérée

Le bouton Add element ajoute une entrée dans une liste. Chaque entrée possède Remove from DOM : elle n’est alors plus visible dans la page, mais le lab conserve volontairement sa reference dans retainedElements.

export function createDetachedElementsSandbox() {
  const retainedElements = [];

  function retainDetachedElement(entry) {
    entry.remove();
    retainedElements.push(entry);
  }

  return { retainedElements, retainDetachedElement };
}

Ce n’est pas le retrait du DOM qui pose problème : c’est la reference oubliée qui continue de relier l’élément à une root JavaScript.

À vous de jouer

Rendre la reference visible

1. Démarrez le lab, ajoutez plusieurs éléments, puis retirez-les tous du DOM.
2. Dans DevTools, ouvrez Memory, choisissez Detached elements et lancez le profile.
3. Les entrées retirées restent listées, car window.detachedElementsLab.retainedElements garde leurs references.
4. Cliquez Release retained references, puis lancez un nouveau profile comparable : les éléments doivent cette fois devenir collectible.

Le but n’est pas seulement de trouver un élément détaché. Vérifiez une hypothèse précise, libérez la reference responsable, puis mesurez à nouveau dans le même scénario.

Dans un vrai codebase

Les références discrètes sont les plus tenaces

Dans une application réelle, la reference peut provenir d’un cache, d’une closure d’event listener, d’un tableau de debug ou d’une ancienne vue gardée par un state manager. Le profile Detached elements donne le nœud ; le retaining path explique qui le garde encore vivant.