No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Cuando utilizar la sección de Performance?

18/22
Recursos

Aportes 37

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Sad, mi computadora sin throttling ya funcionaba como la del profe con throttling

Conclusión sobre el reto
Bueno según lo que he podido investigar (corregidme si estoy equivocado) es que el problema esta en la forma en que obtiene una nueva posición para el elemento.

Algoritmo no optimizado

var pos = m.classList.contains('down') ? m.offsetTop + distance : m.offsetTop - distance;

Aquí podemos observar que obtiene la posición del elemento con respecto al contenedor más cercano en posición relativa (en este caso body) y esto lo hace para cada iteración y cada elemento teniendo que cada vez volver a consultar esa posición para generar una nueva.

Algoritmo optimizado

var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf('px')));
m.classList.contains('down') ? pos += distance : pos -= distance;

Aquí para obtener la posición lee el estilo top anterior del elemento y a partir de ese genera una nueva posición.

La diferencia es que el primer algoritmo (offsetTop) consume mucho más recursos ya que debe consultar del DOM en cada iteración (es una nueva operación para cada elemento y cada iteración), mientras que con el segundo algoritmo (style.top) solamente consulta la posición anterior del estilo almacenado (no debe hacer una nueva operación).

Si estoy equivocado por favor corregidme.

Mi PC anda como una calculadora Casio

que curso tan genial

Vale, en cuanto al reto creo que logré encontrar por qué no está optimizado. Independientemente de que se está llamando a la propiedad “offsetTop” dentro de un if en varias ocaciones (Esto no es buena práctica, pues por cada vez que se llama, el navegador tiene que ir a recalcular el valor de esa propiedad, lo mejor es guardar su valor en una variable), esta propiedad parece tener un problema de performance, porque incluso, si al código optimizado, le pones esa propiedad, la animación seguirá lenta, en cambio, si obtienes el valor directamente de los estilos es cuando se logra optimizar 🤔

Creo que lo solucione, en la línea 65 (Dado que la línea que marca el Performace es la 95 que llama a la función app.update en la línea 62)

Hay un condicional que dice:
if (!app.optimize) y en la línea 32: optimize = false; al borrar el negar (!) se optimiza. profesor estoy en lo correcto?

La solución que he encontrado es eliminar el if de la línea 65 de tal manera que se ejecute siempre el else:

var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf('px')));
        m.classList.contains('down') ? pos += distance : pos -= distance;
        if (pos < 0) pos = 0;
        if (pos > maxHeight) pos = maxHeight;
        m.style.top = pos + 'px';
        if (pos === 0) {
          m.classList.remove('up');
          m.classList.add('down');
        }
        if (pos === maxHeight) {
          m.classList.remove('down');
          m.classList.add('up');
        }

Solución al reto:

En cada iteracion, dentro de los if se trae el valor que esta dentro m que es un objeto para compararlo. Seria mas rapido trabajar con un valor que no este dentro de un objeto, pos:

var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf('px')));
m.classList.contains('down') ? pos += distance : pos -= distance;

m.style.top es un string que contiene el numero+px por eso es neceario guardarlo sin el px y pasarlo a un numero entero. Y se le suma o resta distance dependiendo de si esta subiendo o bajando.

Mi Intel Core 2 Duo sufrio mucho jajaja

Recuerden: Es una buena practica generar 60 fps (frame por segundo)

lo que hice fue desactivar el optimizar en la linea 65
le quite el ! jajaj xd solucionado quedo
if (!app.optimize)
if (app.optimize)

TIP: Revisen la función que se lanza al hacer click en el botón de optimize.

Si ya no esta disponible: https://web.archive.org/web/20200721205417/https://googlechrome.github.io/devtools-samples/jank/

Con dev tools le quitan el ancabezado para que no estorbe, usando display:none

Para cuando ya no esta disponible un recurso, pueden usar https://web.archive.org/ para encontrar versiones guardadas de sitios caidos.

A seguir aprendiendo.

Excelente Clase, mucho por aprender

Leyendo los comentarios, el código y los dos artículos recomendados se realiza este cambio. y listo flujo arreglado.

//En la zona del JS

  app.optimize = true;
  app.count = minimum;
  app.enableApp = true;
// en la parte del css
body {
  height: 100vh;
  width: 100px;
}

para poder solucionar el reto de la optimaizacion de condigo vamos a la línea 66 sustituimos la propiedad offsetTop debido a que esta crea una gran carga de js por cada elemento calculado en el viewport y debemos reemplazar estos por css en js osea empezar a usar cssom

/*
• El método slice() devuelve una copia de una parte del array dentro de un nuevo array 
empezando por inicio hasta fin

• El método indexOf() retorna el primer índice en el que se puede encontrar un elemento dado en el array

recordemos también  que las pantallas  cargan desde arriba hacia abajo

⬇️ 0px, origen
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|                            maxHeight    ⬇️        |
|_ _ _ _ _ __ _ _ _ _ _ _ _ _ _ _ _ _ _ _|    
                                                                      
*/

var posicionElement = parseInt(m.style.top.slice(0 ,m.style.top.indexOf('px')));

m.classList.contains('down') ? posicionElement  += distance : posicionElement -= distance ;

if(posicionElement < 0)
{
  posicionElement = 0;
}
if(posicionElement  > maxHeight)
{
  posicionElement = maxHeight;
}

m.style.top = posicionElement + 'px';

if (posicionElement === 0)
{
  m.classList.remove('up');
  m.classList.add('down');
}
if (posicionElement === maxHeight)
{
  m.classList.remove('down');
  m.classList.add('up');
}

desde aquí pueden descargar el repo para hacer las pruebas offline

https://github.com/GoogleChrome/devtools-samples

Creo que se refiere a que hay Menos frames por segundo, yo lo entiendo como que entre más frames ( cuadros ) por segundo hay en un clíp el movimiento debería ser más fluido no ? 🤔 pero tal vés será mas tipo cámara lenta ( pero fluido ) jajaajaj

Soy el único que no entendió como se solucionaba el reto 🙄🤨 no lo creo… PLEH
Solo entiendo que para que esté optimizado debe cambiarse el

var pos = m.classList.contains('down') ?
            m.offsetTop + distance : m.offsetTop - distance;

por:

var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf('px')));
        m.classList.contains('down') ? pos += distance : pos -= distance;

y el m.offsetTop por el “pos”:
pero no sé porque! 😥, lo único que conozco de javascript lo he aprendido del curso básico de javascript y este… 😦 soy yo o la complejidad del desafío 🤔

1° Hice click en el link que aparece en MAIN, casilla morada con una esquina triangular roja, me llevo a la línea de código que era parte del optimizador.

2° Encontré que el código de “if(!app.optimize)” es lo que lee cuando NO esta optimizado y el “else” es el código optimizado.
3° Compare las líneas de código (las cuales ya describieron su función muchos).
4° Puse como comentarios algunas líneas de código del “If” que eran distintas a las del “else” .
5° Finalmente copie y pegue las líneas del “else” que optimizaban el código, en el “if” y funcionó.

Bastante interesante esta clase

Es claro que la optimización del código está en cambiar la forma en la que se obtiene la posición top de la imáge, pero no me queda claro por qué una es mejor que otra:


var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf('px')));

// mejor qué


var pos = m.classList.contains('down') ?
            m.offsetTop + distance : m.offsetTop - distance;

Caution: This tutorial is based on Chrome 59. If you use another version of Chrome, the UI and features of DevTools may be different. Check chrome://help to see what version of Chrome you’re running.

ya decía pq no me corre igual. o simplemente mi pc apesta, reto no completado, ya me reventare la cabeza con proyectos

Muy util para juegos basados en java o web

Excelente clase sobre performance, me doy que es muy necesario tenerlo en cuenta en los desarrollos para realizar código mas óptimo y con mayor rendimiento

Qué brillante herramienta!

Me sale todo lo que a él pero no me sale el link a javascript ¿cómo le hago para que salga?

Supo un par de cajitas y arranca la refrigeración de mi laptop a todo lo que da jajaja
Pobre, no hace falta que le ponga mas bajo el rendimiento.

<h3>18. ¿Cuándo utilizar la sección de Performance?</h3>

11:46 Reto de la clase.

Enlaces de la clase:
Get Started With Analyzing Runtime Performance
Enlaces complementarios:
Tutorial ¡Aprende a optimizar tus sitios web! - Resolviendo el reto de la clase de optimización de RetaxMaster
Comentarios valiosos de la comunidad: 1

Cómo tomar un screenshot del performance de tu proyecto

Primero ubicas en la barra de color verde el segmento
use el selector de elementos Ctrl+Shift+C en DevTools y haga haz en la mini captura de pantalla en la parte inferior de la ventana principal de DevTools . Entonces DevTools te mostrará el elemento <img> en el árbol de elementos, click derecho en sus datos: image/png y lo abres en el panel de aplicaciones, guardas y listo.

👌

podrias guardar el proyecto web en un repositorio
me refiero a este : https://googlechrome.github.io/devtools-samples/jank/

Para el desafío busqué en los Event Listeners Breakpoints que solicitaran una animación y siguiendo paso a paso llegamos a la parte donde cambia el código si está o no habilitada la opción de optimizar

Hay que aceptar que estoy en ese punto de la curva del (Desconocimiento: No sabes lo que no sabes) estoy muy motivado viendo las clases tratando de entender, ya vi el básico de JavaScript, pero estoy ahi tratando de leer en chino el codigo, no me voy a desmotivar pero me parece que estoy bastante lejos, reviso el inspector y no entiendo como enlazar el html y el css con Js, habra cursos mas basicos para eso ?

Comente la parte del if que le bajaba el rendimiento y eso fue todo

Para Resolverlo elimine el if para que siempre este optimizado