Cursos Empresas Blog Live Conf Eventos Precios

0:006:52

Operaciones en lote

Curso de Manipulación del DOM

Clase 11 / 29

Ver clases

Operaciones en lote

Curso de Manipulación del DOM

Clase 11 de 29

Clase 11 / 29

Operaciones en lote

Curso de Manipulación del DOM

Clase 11 / 29

Ver clases

Andrés D Amelio

Hace 6 años

Operaciones en lote

Si bien podemos manipular el DOM siempre que podamos, operaciones que conlleven a creación, modificación o eliminación de nodos generan un costo en el rendimiento de nuestro sitio web, por lo que mientas menos operaciones hagamos en el DOM nuestro sitio responderá de forma más rápida. Un ejemplo claro es cuando queremos insertar muchos elementos en nuestro DOM, supongamos que tenemos una lista de registros y queremos agregar 100 items nuevos, veamos como podríamos realizarlo

// Obtenemos la tabla
const lista = document.querySelector(".items");

//Insertamos 100 registros
for(let iter=1; iter<=100; iter++) {
	const item = document.createElement("li");
	item.textContent = `Item ${iter}`;

	lista.appendChild(item);
}

Como ven obtuvimos la lista que mutaremos, luego realizamos el ciclo donde en cada iteración iremos creando un nuevo elemento li, que iremos insertando inmediatamente a la lista. Esto en términos de sintaxis, lógica y sentido esta bien, pero hay un pequeño detalle y son la cantidad de operaciones que se están realizando en el DOM, cuando ejecutamos appendChild obligamos al DOM a que se actualice, y cuando son muchos registros afecta la carga. Pero esto lo podemos solucionar de una forma más óptima donde haremos lo mismo pero haciendo una única actualización en el DOM, veamos como

// Obtenemos la tabla
const lista = document.querySelector(".items");

// creamos un auxiliar para guardar los elementos creados
let items = [];

//Insertamos 100 registros
for(let iter=1; iter<=100; iter++) {
	const item = document.createElement("li");
	item.textContent = `Item ${iter}`;
	
	// Insertamos el item en el auxiliar
	items.push(item);
}

// Ahora realizamos la actualización en el DOM
lista.append(...items);

Veamos el tiempo que tarda en ejecutarse cada fragmento de código, para esto usaremos el console.time y console.timeEnd que nos permite cronometrar el tiempo que tarda en ejecutarse ciertas instrucciones.

appendChild

append

Como podemos ver, usando appendChild obtuvimos un mayor tiempo de ejecución, esto quizás parece poco, pero ¿Que pasaría si son 10 mil elementos los que tenemos que agregar? ahí si se empiezan a notar diferencias considerables, y siempre hay que tomar en cuenta que mientras menos tarde es muchísimo mejor.

Comentarios (44)44 comentarios

Alex Maldonado

Más info sobre Spread Operator (Operador de propagación)

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Spread_operator

Jimmy Buriticá Londoño

Super este resumen del Spread Operator

Orangel Gonzalez

Hace 5 años

Con esto ahora si q entiendo mucho mas ...spread operator. Gracias por el aporte 👍🏻

Carlos Eduardo Gomez García

Muy buena explicación, me ha quedado claro. Gracias.

Alexis Steven Valderrama

Wow excelente resumen, y dato interesante, en el curso de Fundamentos de JS se menciona que el spread operator lo que hace es duplicar ese objeto o array para evitar modificar los valores que están en el array que se usó. Este tema es muy importante, ya que en frameworks como React, casi nunca queremos modificar el array u objeto original, sino que queremos dejar sus valores por default y trabajar con el duplicado. :)

Fernando Quinteros Gutierrez

Camilo Gonzalez

Gracias por el aporte. Se te fue una s de mas en el parentesis del push, seria

nodes.push(node)

fermin martin

Hola! 😃 Un pequeño tip: Para hacer un salto de línea cuando estás en la consola del navegador: Shift + Intro

Daniloo Morales

La regla de oro Reducir al máximo las operaciones con el DOM, con métodos que involucren escribir, modificar y eliminar. así tendremos un mejor performance de nuestra aplicación! ⭐⭐⭐⭐⭐

Jonathan 🦑 Alvarez

Profesor

Exacto!

Juan Gui Arenas

Mi mente despues de esta clase :O :O

Luis Fernando Rodriguez Boett

Hace 4 años

Literalmente xD

Carlos Esteban León Pinilla

super! Sin embargo se me hizo extraño que no hablara de los document fragments. Estos nos permiten crear los nodos en memoria guardandolos todos en un document fragment y al final insertando el document fragment con todos los nodos, por ejemplo:

Esto me renderiza 150 párrafos con una sola modificación en el DOM.

Alfonso Aguilar Grimaldo

He visto el curso y hasta aquí me surge la duda, ¿cuál es el propósito de manipular el DOM en un caso práctico o un caso de la vida laboral?

Hola @PongoAG

Una muy buena duda!

Acá hay unos ejemplos reales:

Cuando estás en Facebook, haces scroll hasta el final y puff se carga más contenido.
Cuando estás chateando y sin refrescar la página, puff aparece un nuevo mensaje.

Eso es manipulación del DOM.

En general: Todo lo dinámico, todo el movimiento que sucede en una página es porque el DOM se manipula de una forma u otra.

Gracias Jona, ahora entiendo el funcionamiento y la importancia sobre aprender del DOM

Sebastian Gonzalez

Para tener una buena optimizacion de la pagina "en especial si hay mucho contenido" lo mejor es manipular el DOM lo menos posible, podemos usar alternativas como usar arrays u objetos para que con pocas "llamadas" al DOM tengamos el mismo resultado que haciendo miles de llamadas, esto nos da mayor rendimiento y optimizacion

Juan Esteban Velez Muñoz

Tambien podria hacerse con map

const n = 100
const nodos = [...Array(n).keys()]
const mapNodes = nodos.map(x =>  document.createElement('input')) 
document.body.append(...mapNodes)

Spread Operator tambein sirve para unir 2 o mas objetos, Array y para traer solo los datos que necesitemos del Objeto o Array

Es muy poderoso :D

Santiago Reynoso Dunjo

Algo interesante de leer es la Web Api Document Fragment. Cuando modificamos al documento insertándole nodos, por ejemplo agregándole 100 inputs, estamos recargando el árbol del DOM 100 veces. Si utilizamos esta Web Api, básicamente creamos un pedacito de documento al cual podemos agregarle todos los nodos que queramos y todo esto sin afectar al documento original. Luego, una vez finalizadas las operaciones, podemos agregar este fragmento directamente al DOM. Ejemplo MDN: HTML

<ul id="list"></ul>

JavaScript

const list = document.querySelector('#list')
const fruits = ['Apple', 'Orange', 'Banana', 'Melon']

//Creamos un nuevo fragmento de documento
const fragment = new DocumentFragment()

fruits.forEach((fruit) => {
	let li = document.createElement('li')
	li.innerHTML = fruit
	//Agregamos las frutas al fragmento creado
	fragment.appendChild(li)
})

//Agregamos el fragmento al Document Object Model, lo recargamos 1 vez.
list.appendChild(fragment)

FELIX MIRANDA TERAN

Pregunta inocente: ¿como pasar a la siguiente linea en la consola sin ejecutar el codigo y mantener la identación?

Nilson Diaz

Hey ! Puedes hacerlo presionando shift+ Enter , aunque en la consola tendras que indentar tu mismo

Gabriel Gomez

Hola, eso lo puedes hacer con shift + enter. O al menos eso me sirve a mí en google chrome.

Sebastián Buitrago

hablando de que manipular el dom afecta el rendimiento, cuanto mas lo afecta crear uno virtual ya que normalmente los frameworks trabajan asi, y aunque no entiendo porque los frameworks no manipulan el dom directamente

Buenísima pregunta @jasba24!

Precisamente por eso se utiliza la estrategia del Virtual DOM.

Como hacer operaciones en el DOM es tan costoso, lo que hace el Virtual DOM es recopilar todas las actualizaciones posibles (batch update) para encontrar el número mínimo de operaciones que logran ese resultado.

De esa forma se garantiza que cada que se manipula el DOM, el framework/ librería lo hace de la forma más óptima posible.

Gracias por responder profe,

Carlos Rubén Díaz Gutiérrez

¿Por qué en el primer ejemplo se usa appendChild y en el segundo append?

Edgardo Andres Vargas Saenz

Miguel Angel Reyes Moreno

Hacer operaciones en el DOM es algo muy costoso. Entre menos operaciones hagamos en el DOM especialmente escribir y eliminar , más rápida será nuestra operación.

Ejemplo, agregar 100 inputs al final de body.

Forma NO óptima: (modificamos el DOM 100 veces)

for (let i = 0; i<100; i++){
    const node = document.createElement('input')
    document.body.appendChild(node)
}

Mejor forma: (modificamos el DOM 1 vez)

const nodos = []

for (let i = 0; i<100; i++){
    const node = document.createElement('input')
    nodos.push(node)
}

document.body.append(...nodos)

Documentación de operador de propagación

Sabia que modificar muchas veces en el DOM tenia un precio, pero nunca imaginé que el costo podría ser alto

Agradezco mucho esta clase porque ayuda a aprender más sobre rendimiento y optimización :star2:.

Jesús David Mejía Orozco

Luis Alberto Ramirez Salas

Me encanto tu aporte !

Carlos Rodríguez

Lo u'nico que no me gusta del profe es que no utiliza ";" punto y coma al finalizar la línea en js!

Carlos Rafael Córdova Flores

Cuál es el inconveniente ? 😮

@carloscdev es algo subjetivo! A mi me gusta los ";"

Operaciones en lote

Operaciones en lote

Operaciones en lote

Progreso del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

Librerías relacionadas

Conclusiones

Operaciones en lote

Operaciones en lote

Comentarios

¿Qué es el Spread Operator?