Establecer innerHTML aumenta el número de nodos en HTML

Explica el problema

Entonces noté que al usar someElement.innerHTML el conteo de Nodos DOM aumenta.

enter image description here

Supongo que la referencia se cancela pero la memoria aún se asigna hasta que el recolector de basura elimina el objeto.


Ejemplo (HTML):

         
Time Goes Here

Ejemplo (JavaScript):

  var timer; var body; var oldTime = ""; var timeContainer; function startTimer(){ timeContainer = document.getElementById("timeContainer"); timer = setInterval(getTime, 10); } function getTime(){ var d = new Date(); var timeString = d.getUTCHours() +":"+ d.getUTCMinutes(); +":"+ d.getUTCSeconds(); if(timeString != oldTime){ oldTime = timeString; timeContainer.innerHTML = timeString; } } 

Lo que intenté hasta ahora

  • Traté de usar someElement.textContent .
  • Eliminé el Whoe ParentElement cada vez que actualiza el temporizador y creaba uno nuevo

Pregunta

¿Cómo puedo evitar boost el número de nodos incluso una vez cuando estoy simplemente refrescando contenido y por qué necesita un Nodo adicional de todos modos?

Supongo que la referencia se cancela pero la memoria aún se asigna hasta que el recolector de basura elimina el objeto.

Correcto.

¿Cómo puedo evitar boost el número de nodos incluso una vez cuando estoy simplemente refrescando contenido?

No puedes ni debes preocuparte por eso. Este es el dominio del navegador, hace lo que quiere hacer cuando se trata de recolección de basura (y diferentes navegadores pueden hacerlo de manera diferente).

Eliminé todo el elemento ParentElement cada vez que actualiza el temporizador y creaba uno nuevo

Solo porque lo borraste (lo hiciste inaccesible), no significa que fue basura recolectada al instante.

Esto es natural y esperado.

La recolección de basura de los navegadores se ejecuta de forma asíncrona. Tan pronto como su DOM real separe los nodos, no se garantiza que estén libres de stack. Permanecerán allí hasta que se active el próximo recolector de basura.

Como se explica en las herramientas de desarrollo # Solucionar problemas de memoria , no te preocupes por eso y déjalo en el proceso de recolección de basura.

Tenga en cuenta que déjelo en GC siempre que no perjudique el rendimiento de sus aplicaciones. Si realmente te está presionando para que el navegador se ralentice y se cuelgue, realmente deberías comenzar a prepararlo y arreglarlo. Esa podría ser una posible pérdida de memoria.

Un nodo DOM solo se puede recolectar como basura cuando no hay referencias desde el árbol DOM o el código JavaScript de la página. Se dice que un nodo está “separado” cuando se elimina del árbol DOM, pero aún hay JavaScript que lo hace referencia. Los nodos DOM separados son una causa común de pérdidas de memoria. Esta sección le enseña a usar los perfiladores de montón de DevTools para identificar los nodos separados.

Y la corrección se da en el mismo artículo usando las herramientas de Chrome Dev. En resumen, tome instantáneas de su montón y comience a buscar nodos separados.

enter image description here

Los nodos resaltados en amarillo tienen referencias directas desde el código JavaScript. Los nodos resaltados en rojo no tienen referencias directas. Solo están vivos porque son parte del árbol del nodo amarillo. En general, desea centrarse en los nodos amarillos. Arregle su código para que el nodo amarillo no esté activo durante más tiempo de lo necesario y también se deshaga de los nodos rojos que forman parte del árbol del nodo amarillo.

Lee mas ..