A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Operaciones en lote

10/28
Recursos

Aportes 33

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

<h4>Apuntes</h4>
  • 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
<h3>Ejemplo: Escribir 100 inputs</h3>
<h3>馃檯鈥嶁檪锔 No optimo</h3>
for(let i = 0; i < 100; i++){
	const node = document.createElement("input");
	document.body.appendChild(node); // Modificamos 100 veces
}

<h3>馃懆鈥嶐煉 Optimo</h3>
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! 猸愨瓙猸愨瓙猸

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 鈥渆n 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 鈥渓lamadas鈥 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)

Lo u鈥檔ico 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.

Mi mente despues de esta clase 馃槷 馃槷

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

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.

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 馃槃

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 鈥榙uro鈥 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

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)

Entonces鈥o 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.

<h4>Operaciones en lote</h4>

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

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

馃憣