Operaciones en lote
Contenido del curso
Operaciones básicas
Workshop 1: Fetch
Eventos
Workshop 2: Lazy loading
Workshop 3
Librerías relacionadas
Conclusiones
Operaciones en lote
Contenido del curso
Operaciones en lote
Alex Maldonado
Estudiante
Jimmy Buriticá Londoño
Estudiante
Orangel Gonzalez
Estudiante
Carlos Eduardo Gomez García
EstudianteJimmy Buriticá Londoño
Estudiante
Alexis Steven Valderrama
Estudiante
Fernando Quinteros Gutierrez
Estudiante
Camilo Gonzalez
Estudiante
fermin martin
Estudiante
Andrés D Amelio
Estudiante
Daniloo Morales
Estudiante
Jonathan 🦑 Alvarez
Profesor
Juan Gui Arenas
Estudiante
Luis Fernando Rodriguez Boett
Estudiante
Carlos Esteban León Pinilla
Estudiante
Alfonso Aguilar Grimaldo
EstudianteJonathan 🦑 Alvarez
ProfesorAlfonso Aguilar Grimaldo
Estudiante
Sebastian Gonzalez
Estudiante
Juan Esteban Velez Muñoz
EstudianteJuan Gui Arenas
Estudiante
Santiago Reynoso Dunjo
Estudiante
FELIX MIRANDA TERAN
Estudiante
Nilson Diaz
Estudiante
Gabriel Gomez
Estudiante
Sebastián Buitrago
EstudianteJonathan 🦑 Alvarez
ProfesorSebastián Buitrago
Estudiante
Carlos Rubén Díaz Gutiérrez
Estudiante
Edgardo Andres Vargas Saenz
Estudiante
Miguel Angel Reyes Moreno
EstudianteLuis Fernando Rodriguez Boett
Estudiante
Jesús David Mejía Orozco
EstudianteLuis Alberto Ramirez Salas
Estudiante
Carlos Rodríguez
Estudiante
Carlos Rafael Córdova Flores
EstudianteCarlos Rodríguez
EstudianteMás info sobre Spread Operator (Operador de propagación)
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Spread_operator
Super este resumen del Spread Operator
Con esto ahora si q entiendo mucho mas ...spread operator. Gracias por el aporte 👍🏻
¿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)
Muy buena explicación, me ha quedado claro. Gracias.
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. :)
⏩ Operaciones en lote
Apuntes
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
Gracias por el aporte. Se te fue una s de mas en el parentesis del push, seria
nodes.push(node)
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! ⭐⭐⭐⭐⭐
Exacto!
Mi mente despues de esta clase :O :O
Literalmente xD
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.
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:
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
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 :D
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)
Pregunta inocente: ¿como pasar a la siguiente linea en la consola sin ejecutar el codigo y mantener la identación?
Hey ! Puedes hacerlo presionando shift+ Enter , aunque en la consola tendras que indentar tu mismo
Hola, eso lo puedes hacer con shift + enter. O al menos eso me sirve a mí en google chrome.
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,
¿Por qué en el primer ejemplo se usa appendChild y en el segundo append?
Hola carlosrubendg, recordemos que hay una diferencia entre appendChild y append.
document.getElementById("div").append("Hello");
document.getElementById("div").appendChild("Hello");
Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.document.getElementById("div").appendChild("<p></p>");
const p = document.createElement("p"); document.getElementById("div").appendChild(p);
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
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:.
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.
Me encanto tu aporte !
Lo u'nico que no me gusta del profe es que no utiliza ";" punto y coma al finalizar la línea en js!
Cuál es el inconveniente ? 😮
@carloscdev es algo subjetivo! A mi me gusta los ";"