La forma más rápida de clonar repetidamente un set de nodos

Tengo una curiosidad con un complemento que escribí para Knockout, llamado knockout-fast-foreach , es decir, cuál es la forma más rápida de clonar repetidamente un set de nodos e insertlos en el DOM.

Hay dos cosas que deben suceder en la clonación, es decir, copyr los nodos de la plantilla de origen e inyectarlos de nuevo en el DOM .

Ahora hay algunas opciones de layout que se aplican, que incluyen:

  1. Los nodos fuente serán hijos de una única entidad DOM;
  2. El objective puede tener hermanos no afectados por la inyección DOM, es decir, no todos los nodos secundarios pueden cambiar;
  3. La fuente puede ser una <template> , <script> o un nodo regular HTML DOM.

Así por ejemplo:

 <template id='src'>ø</template> <div id='target' data-bind='fastForEach: $data'> </div> 

Cuando uno aplica el enlace con ko.applyBindings([1, 2, 3], document.getElementById('target')) el resultado será:

 <template id='src'>ø <span data-bind='text: $data'></span></template> <div id='target' data-bind='fastForEach: $data'> ø <span data-bind='text: $data'>1</span> ø <span data-bind='text: $data'>2</span> ø <span data-bind='text: $data'>3</span> </div> 

Si bien ese ejemplo es específico de KO, la realización de la manipulación de DOM debe ser una característica relativamente universal.

Como puede ver en el código fuente vinculado anteriormente, la forma en que se me ocurrió hasta ahora es copyr los nodos de origen en una matriz, luego clonarlos + inyectarlos en el destino en la position deseada.

¿Es posible que exista una manera más rápida de clonar y copyr múltiples elementos (por ejemplo, tal vez utilizando fragments de documentos)?

Está utilizando el data binding. Esto en sí mismo va a ser lento. El mejor performance siempre será manipular una cadena fuera del dom y luego insertla en el dom de una vez: element.innerHTML = "su nuevo html". Mejor aún no tenerlo en línea porque esto ralentiza la renderización del browser. Itererativamente agregar a la dom es golpear el renderizador del browser. Ver – http://davidwalsh.name/css-js-animation .