0
156
Views¿Cómo crear elementos DOM en la memoria JS de manera eficiente?
Considere el siguiente código que inserta 100 000 tramos con el contenido '0' dentro.
<body> <script type="module"> const container = document.getElementById('root') const CHILDREN_COUNT = 100000; for (let i = 0; i < CHILDREN_COUNT; i++) { const newChild = document.createElement("span"); newChild.innerHTML = '0' container.appendChild(newChild) } </script> <div id="root" style="overflow-wrap: break-word"> </div> </body> En mi opinión, después de cada ciclo, la recolección de basura debería limpiar newChild ya que no hay más referencias a esta var. Supongo que el container en sí es un puntero al elemento DOM, en lugar de estar todo en la memoria, y de cualquier manera, debe limpiarse después de que se ejecuta el ciclo.
Sin embargo, las pruebas revelan que esta página ocupará 200 000 kb~ de memoria (por administrador de tareas en Chromium), pero si CHILDREN_COUNT se reduce a 10, solo ocupa c. 30.000kb~ de memoria. ¿Podría la diferencia deberse completamente a que el DOM tiene que contener más elementos span ? Dado que el contenido de cada tramo es mínimo, habría asumido que no.
¿Hay algo que pueda hacer aquí para administrar mejor el uso de la memoria?
1 answers
Answer question0
verifique DocumentFragment -> https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
var list = document.querySelector('#list') const CHILDREN_COUNT = 100000; var fragment = new DocumentFragment(); for (let i = 0; i < CHILDREN_COUNT; i++) { var spanEl = document.createElement('span'); spanEl.innerHTML ='0'; fragment.appendChild(spanEl); } list.appendChild(fragment); 