Operaciones en lote

Clase 11 de 29 • Curso de Manipulación del DOM

Alex Maldonado

student•

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

student•

Super este resumen del Spread Operator

Orangel Gonzalez

student•

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

Carlos Eduardo Gomez García

teacher•

¿Qué es el Spread Operator?

Si te causa duda esto, no te preocupes, aquí te lo explico:

El spread operator trabaja con arreglos y objetos, cuando lo pasamos en la llamada a una función, lo que hará es deconstruir ese arreglo y lo pasará como parámetros individuales para la función... aquí un ejemplo para que me entiendas:

function funcionQueRecibeTresParametros(param1, param2, param3) {
	// code...
}

// La forma normal de llamarla sería:
funcionQueRecibeTresParametros(1, 2, 3)

// Pero, ¿qué pasa si tengo un arreglo que contiene esos 3 parámetros?
const arregloDeParametros = [1, 2, 3]

// Bueno, pues el spread operator puede deconstruir ese arreglo y poner cada elemento en donde irían mis parámetros :D!
funcionQueRecibeTresParametros(...arregloDeParametros)

// Eso sería equivalente a esto:
funcionQueRecibeTresParametros(arregloDeParametros[0], arregloDeParametros[1], arregloDeParametros[2])

Esto es muy útil cuando tenemos demasiados valores, recuerda, mientras menos modifiques el DOM, más eficiente será tu programa, y recordemos que tenemos a append() que nos permite insertar múltiples elementos en el DOM en una sola llamada, ¡aprovechémoslo! . Dato curioso: . En algunos frameworks de JavaScript como Vue, existe una cosa llamada el Virtual DOM, no es más que un objeto JavaScript que simula al DOM real, al menos en Vue, esto tiene un proxy que está observando por cambios en ese Virtual DOM para reaccionar y renderizar solo una pequeña parte en el DOM (en lugar de reescribirlo completamente)

Jimmy Buriticá Londoño

student•

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

Alexis Steven Valderrama

student•

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

student•

⏩ Operaciones en lote

Apuntes

Realizar mutaciones en el DOM tiene un costo
Cuando usamos frameworks y liberáis lo que más cuesta en estas librerías es estar haciendo operaciones en el DOM
Entre menos operaciones realicemos en el DOM especialmente escribir y eliminar cosas más rápidas sera el website

Ejemplo: Escribir 100 inputs

🙅‍♂️ No optimo

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

👨‍💻 Optimo

const nodes  = [];
for(let i = 0; i < 100; i++){
	const node = document.createElement("input");
	nodes.push(nodes)
}
	document.body.append(...nodes); // Modificamos 1 sola vez

RESUMEN: Mientras menos modificaciones hagamos en el DOM mayor sera el rendimiento del website

Camilo Gonzalez

student•

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

nodes.push(node)

fermin martin

student•

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

Andrés D Amelio

student•

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.

Daniloo Morales

student•

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

teacher•

Exacto!

Juan Gui Arenas

student•

Mi mente despues de esta clase :O :O

Luis Fernando Rodriguez Boett

student•

Literalmente xD

Carlos Esteban León Pinilla

student•

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

student•

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?

Jonathan 🦑 Alvarez

teacher•

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.

Alfonso Aguilar Grimaldo

student•

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

Sebastian Gonzalez

student•

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

student•

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)

Juan Gui Arenas

student•

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

student•

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

student•

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

Nilson Diaz

student•

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

Gabriel Gomez

student•

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

Sebastián Buitrago

student•

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

Jonathan 🦑 Alvarez

teacher•

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.

Sebastián Buitrago

student•

Gracias por responder profe,

Carlos Rubén Díaz Gutiérrez

student•

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

Edgardo Andres Vargas Saenz

student•

Hola carlosrubendg, recordemos que hay una diferencia entre appendChild y append.

appendChild es una función del DOM, mientas que append en una función de JavaScript Para que entiendas mejor, imagina que quieres insertar algo dentro de un div desde tu HTML.

document.getElementById("div").append("Hello");

Ahora que pasa si intentas hacer eso mismo, pero con appendChild

document.getElementById("div").appendChild("Hello");

Tu consola mostrara: Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
¿Por qué? Porque la función appendChild necesita un elemento como parámetro.
Tú no puedes hacer esto

document.getElementById("div").appendChild("<p></p>");

Pero tu si puedes hacer esto

const p = document.createElement("p");

document.getElementById("div").appendChild(p);

Miguel Angel Reyes Moreno

student•

Operaciones en lote

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

Luis Fernando Rodriguez Boett

student•

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

student•

Spread Operator

Vamos a ver el uso del spread operator para pasar un array a una lista de argumentos. Esto puede ser muy útil en casos donde tenemos que pasar una lista de argumentos (no un array) a un método/función.

Antes de comenzar es importante resaltar el spread operator fue incluido en la nueva versión de Javascript ES6 y ya funciona en todos los navegadores.

let numeros = [4, 16, 25, 2, 45, 8];

let numeroMayor = Math.max(numeros);

console.log(numeroMayor); // NaN

Observamos que el valor de la variable numeroMayor es NAN, esto es porque el método max() puede recibir una lista de argumentos y no le podemos pasar un array.

Entonces podríamos hacer los siguiente:

let numeroMayor = Math.max(4, 16, 25, 2, 45, 8);

console.log(numeroMayor); // 45

Ahora sí podemos acceder al número más alto de la lista de argumentos. De todos modos podemos mejorar este código gracias al spread operator.

Veamos cómo hacerlo!

let numeros = [4, 16, 25, 2, 45, 8];

let numeroMayor = Math.max(...numeros);

console.log(numeroMayor); // 45

Al anteponer los tres puntos que representan al spread operator transformamos la variable numeros (que en el ejemplo representa un array con números) en una lista de argumentos, y es por ello que podemos acceder al número mayor del array numeros. Es como si le quitáramos los corchetes ( “[]” ) al array.

Luis Alberto Ramirez Salas

student•

Me encanto tu aporte !

Carlos Rodríguez

student•

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

student•

Cuál es el inconveniente ? 😮

Carlos Rodríguez

student•

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

function funcionQueRecibeTresParametros(param1, param2, param3) {
	// code...
}

// La forma normal de llamarla sería:
funcionQueRecibeTresParametros(1, 2, 3)

// Pero, ¿qué pasa si tengo un arreglo que contiene esos 3 parámetros?
const arregloDeParametros = [1, 2, 3]

// Bueno, pues el spread operator puede deconstruir ese arreglo y poner cada elemento en donde irían mis parámetros :D!
funcionQueRecibeTresParametros(...arregloDeParametros)

// Eso sería equivalente a esto:
funcionQueRecibeTresParametros(arregloDeParametros[0], arregloDeParametros[1], arregloDeParametros[2])

// 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);
}

// 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);

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)