Tengo una serie de palabras preestablecidas que quiero aleatorizar y asignar espacios en blanco después de cada entrada, luego dividirlas en caracteres individuales que luego se colocan en un elemento html como <div> individual. Tengo esto hasta ahora que funciona, pero se vuelve algo lento más allá de los 150-200 caracteres, lo cual es comprensible, supongo. Necesito que cada carácter esté en su propio <div> , así que no estoy seguro de cómo optimizar esto.
Tengo una estructura de algoritmo similar al fragmento de código a continuación. ¿Cómo evito el problema de optimización cuando renderizo muchos elementos HTML dinámicos en el bucle?
let container = document.getElementById('container'); let arr = ['one', 'two', 'three', 'four']; let currentIndex = arr.length; let current__text = [], count, randomIndex; while (currentIndex != 0) { randomIndex = Math.floor(Math.random() * currentIndex); --currentIndex; [current__text[currentIndex], arr[randomIndex]] = [ current__text[randomIndex], arr[currentIndex]]; } arr = arr.slice(0, count).map(e => e + ' ').join('').split(''); arr.pop(); for (item of arr) { container.innerHTML += `<div class="char">${item}</div>`; } #container{} .char{} <div id="container"></div>La mayor parte del algoritmo que desarrolló no tiene efecto en el resultado. El método printArray() en la solución que desarrollé es equivalente a lo que está haciendo actualmente.
Agregué el cambio especificado por @Teemu al programa y comparé los resultados. Como señaló @Teemu , el método Element.insertAdjacentHTML() es muy rápido para la propiedad Element.innerHTML . A continuación se muestra una comparación de los tiempos de ejecución:
Duration (insertAdjacentHTML): 2.7000000029802322 milliseconds Duration (innerHTML): 85.70000000298023 milliseconds NOTA: Para comparar las diferencias de tiempo de ejecución del método Element.insertAdjacentHTML() y la propiedad Element.innerHTML , no asigno ninguna a la propiedad de display del estilo de clase .char , por lo que no se imprime un elemento en la pantalla.
let container = document.getElementById('container'); let firstArray = [], secondArray = []; function measurePerformance(method, mode, array){ var startTime = performance.now(); method(mode, array); var endTime = performance.now(); console.log(`Duration (${mode}): ${endTime - startTime} milliseconds`); } function generateArray(firstArray, secondArray){ for(let i = 100 ; i > 50 ; --i){ firstArray.push(i); secondArray.push(i); } } function printArray(mode, array){ array = array.map(e => e + ' ').join('').split(''); if(mode === "insertAdjacentHTML"){ for(item of array){ container.insertAdjacentHTML("beforeend", `<div class="char">${item}</div>`); } } else if(mode === "innerHTML"){ for(item of array){ container.innerHTML += `<div class="char">${item}</div>`; } } } generateArray(firstArray, secondArray); measurePerformance(printArray, "insertAdjacentHTML", firstArray); measurePerformance(printArray, "innerHTML", secondArray); .char{ background-color: yellow; border: 1px solid gray; margin-bottom: 2px; display: none; } <div id="container"></div>Para crear las letras necesitas esto:
arr = ['one', 'two', 'three', 'four']; const output = arr.map( (word) => word.trim().split('') ); console.log(output)No agregué parte HTML a mi respuesta. Si necesitas ayuda al respecto, házmelo saber.