¿InnerHTML es eficiente para listas grandes? Buscando alternativas

Hola a todos,

Estoy desarrollando una función para gestionar una lista de amigos en un array y mostrar la lista actualizada en una página web, con el objetivo de realizar un sorteo de amigo secreto. Para evitar la duplicación de nombres al actualizar la lista, actualmente utilizo listaAmigos.innerHTML = ''; antes de volver a renderizar la lista. Si bien esta línea funciona bien para listas pequeñas, me preocupa su rendimiento con listas de amigos muy grandes.

listaAmigos.innerHTML = ''; es una forma sencilla de limpiar el contenido de un elemento HTML, pero al trabajar con muchos datos, la modificación directa del DOM puede ser ineficiente, causando reflujos y repintados que ralentizan la aplicación.

¿Existen alternativas más eficientes para limpiar el contenido de listaAmigos antes de actualizarlo con una lista grande de amigos? Estoy buscando soluciones que garanticen un buen rendimiento, incluso con cientos o miles de nombres.

He considerado algunas opciones, como usar listaAmigos.textContent = ''; o iterar y remover nodos hijos con removeChild, pero me gustaría conocer vuestras experiencias y sugerencias. ¿Alguna recomendación para optimizar este proceso, quizás usando técnicas de manipulación del DOM más avanzadas o librerías específicas? Gracias de antemano por vuestra ayuda.

function actualizarListaAmigos() {
     // Limpiamos la lista antes de mostrarla para evitar resultados duplicados.
        listaAmigos.innerHTML = '';

//Codigo para agregar amigos a la lista del sorteo de amigo secreto.
        
 }

Como regla general, innerHTML es más lento, especialmente cuando se usa para eliminar contenido (incluso si se asigna una cadena vacía), porque el navegador tiene que volver a analizar todo el HTML del elemento.

Así que, ¿qué es mejor? Pues hay bastantes opciones, esto ya se preguntó en un foro en inglés, ¿Por qué removeChild es más rápido que innerHTML? (Stack Overflow), donde se menciona que usar la función removeChild puede ser más eficiente:

while (listaAmigos.firstChild) {
    listaAmigos.removeChild(listaAmigos.firstChild);
}

También hay opciones más modernas y aún más eficientes, están optimizadas íntegramente, como:

listaAmigos.replaceChildren();

Hay un benchmark comparando innerHTML, replaceChildren , remove y removeChild:
Benchmark sobre métodos de eliminación DOM

Según esa prueba, replaceChildren puede ser hasta 60 veces más rápido que innerHTML.
Gracias por la pregunta, ¡yo tampoco lo sabía hasta que lo investigué!