Fragmentos de Documentos.
Clonación de Nodos. Rendimiento y Optimización.

Los scripts de estos ejemplos se encuentran en el Capítulo 10 del Libro 2 del Instructivo Programando Paso a Paso y Más

Los libros 1 y 2 están a la venta en Amazon

Energyner

Fragmentos de Documentos.

10.18 Fragmentos de Documentos

Ejemplo 1. Inserción de Múltiples Elementos. Sin tener en cuenta DocumentFragment

Ejemplo 2. Inserción de Múltiples Elementos. Utilizando DocumentFragment

Ejemplo 3. Clonación y Modificación de Estructuras Complejas. Sin tener en cuenta DocumentFragment

|div|

Ejemplo 4. Clonación y Modificación de Estructuras Complejas. Utilizando DocumentFragment

|div|

Ejemplo 5. Actualización de Componentes Dinámicos Sin tener en cuenta DocumentFragment

Ejemplo 6. Actualización de Componentes Dinámicos Utilizando DocumentFragment

Clonación de Nodos

10.19 Clonación de Nodos.

10.19.1 cloneNode()

Ejemplo 1. Clona un párrafo con todos sus hijos y agrega una copia al cuerpo del documento.

Soy el parrafo original..

Soy primer parrafo

Soy segundo parrafo

Ejemplo 2. Clona un Formulario

Formulario Clonado

Agregar aqui

10.19.2 NodeList vs. HTMLCollection: Navegando por el DOM

Element |p| class="item_192 - NodeList

Element |div| class="item_192 - NodeList

10.19.2.2 Creación de HTMLCollection*

Ejemplo 1. Creación de HTMLCollection

Texto original

Texto sustituido

Elemento |i|
EElemento |i|
Elemento |i|

Rendimiento y Optimización

10.20 Rendimiento y Optimización

10.20.1 Reflujo y repintado

Ejemplo 1. Cambiar el Color de Muchos Elementos. Primero, un código ineficiente

Ejemplo 2. Cambiar el Color de Muchos Elementos. Código optimizado

10.20.2 - 10.20.3 Estos ejercicios prácticos no se realizan online. Ver el Libro

10.20.4 Minimizar el acceso al DOM

Ejemplo 1.Guardar refencias

Primera div
Segunda div
Tercera div
Cuarta div

Ejemplo 2 Realizar cambios de bloque

Primera div
Segunda div
Tercera div
Cuarta div

Ejemplo 3. Ejemplo con jQuery

div presente
div a ocultar

10.20.5 Utilizar requestAnimationFrame

Ejemplo 1. Animar un elemento que se mueve de izquierda a derecha al recargar la pagina.

Animando id="213" class=p_207

10.20.6 Batching de actualizaciones.