• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

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?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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);

ingrese la descripción de la imagen aquí

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error