Operaciones en lote

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

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

¿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)

⏩ Operaciones en lote

• 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

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

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

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

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.

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! ⭐⭐⭐⭐⭐

Mi mente despues de esta clase 😮 😮

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.

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

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 😄

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)

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 🌟.

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.

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

Hacer operaciones en el DOM tiene un costo de performance. Para ello la regla de oro es, que cuando trabajemos con el DOM intentemos reducir el número de operaciones. Específicamente; escribir, modificar y eliminar.

Spread Operator ‘…’

Se usa en arreglos y objetos.
Cuando lo pasamos en la llamada a una función,
lo que hará es deconstruir el elemento siguiente al ‘…’ y tomara sus elementos internos, y dejara cada uno como parametro de la funcion

EJ:

const numeros = [1, 2, 3]
const sumar = (a, b, c) => a + b + c 
sumar(...numeros) 

// eso es igual a:
sumar(numeros[0], numeros[1], numeros[2])

Mis apuntes en Notion💚

Otra forma usando template, estos no se renderizan al cargar el documento

Regla de ORO: cuando trabajemos con el DOM intentemos reducir el número de operaciones (escribir, eliminar, modificar) al número menor posible.

es muy importante este curso sobre el DOM , pero tambien el curso de ECMASCRIPT-6 para pasar a react, vue o angular, sino se perderan

El operador Spread que son los tres puntos que se escriben como prefijo de nuestro array básicamente sirve para enviar todos los valores de nuestro array en una sola operación. Es similar a eliminar los corchetes [] y pasáramos separados por comas (,) cada valor.

Les dejo un enlace con una simple explicación de su utilidad:

https://platzi.com/contributions/entendiendo-el-spread-operator-en-javascript/#:~:text=Al anteponer los tres puntos,número mayor del array numeros.

Luego de haber visto el curso de optimización web esto se entiende al instante, jajaja. Las operaciones de layout y paint son las mas costosas, y al hacer esto que nos mostró el profesor en vez de hacer 100 layouts y paints, haríamos solo 1.

Delegemos la resolucion de problemas al lenguaje de programación

La intención mas valiosa que veo de esta clase es que usemos Js para hacer el trabajo ‘duro’ todas aquellas operaciones que requieren de multiples ejecuciones dado que para eso tenemos el lenguaje de programación y el DOM apesar de que es capaz de ejecutar instrucciones con fragmentos de Js no tendra la misma optimización, es mejor resolver problema con JS y a el DOM solo pasarle el resultado

Entonces…lo que hay que saber para la optimizacion web de DOM es que tengo que buscar la manera de que el programa sea lo mas rapido posible, eso como se hace? FACIL, llamar lo menos posible al dom, es decir, no llames 100 veces al dom para pasarle dato por dato. Mas bien, guarda todos los datos donde quieras como un array, y LLAMA una SOLA VEZ al DOM para pasarle todos los datos de una

Data importante en el sector de preguntas!

¿cuál es el propósito de manipular el DOM en un caso práctico o un caso de la vida laboral?

• 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.

Creo que esta es una de las clases más valiosas que he tomado en Platzi, muchas gracias!

Hasta ahora el curso me ha servido de muchísimo. Sin querer termino jugando con el DOM por mucho tiempo 😄

Hacer operaciones en el DOM no es gratuitos y cuando manejamos cosas avanzados y lo que mas cuesta en librerias mas avanzadas, lo que mas cuesta es estar haciendo operaciones en el DOM. Esto es importante, la cantidad de nodos que estemos operando en JS debe ser considerable, entre menos operaciones estemos realizando en el DOM mas rapida sera nuestra pagina web.

Unos consejos son:

• Operaciones en Lote:

En caso de que agregaramos 100 inputs de forma traducional:

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

Esto modifica 100 veces nuestro DOM lo que provoca mas lentitud. Es mejor las operaciones en lote y reducir el numero de operaciones, esto seria

const nodos = []
//CREAMOS UN ARREGLO Y LE INSERTAMOS 100 NODOS
for(let i = 0; i<100 ; i++){
	const node = document.createElement('input');
	nodos.push(node);
}
//LAS AGREGAMOS AL DOM CON EL SPRING OPERATOR
document.body.append(...nodos);

gracias por esta clase

const nodos = [] //Palabra reservada en JS y lo creo como array

for (let i = 0; i < 100; i++) {
    const node = document.createElement('input')
    nodos.push(node)
}
100
nodos //Ahora tengo en la memoria de JS 100 nodos

document.body.append(...nodos)
// De esta forma reduzco de 100 cambios a uno solo
//Siempre debo buscar la forma de reducir las operaciones.

• Si se realizan muchas operaciones en el DOM, como crear y eliminar, pueden ocasionar problemas de rendimientos en el navegador.
• Para las operaciones masivas podemos usar append o remove.

Que excelente curso

es nuevo para mi el spread operator

Nota: cuando trabajemos con el Dom, intentemos reducir al número de operaciones al número menor posible.

Entre menos operaciones tengamos en el DOM (especialmente escribir y eliminar cosas), mas rápida sera nuestra aplicación.

👌