Creación de perfiles de JavaScript con las herramientas para desarrolladores de Chrome

1. Lecturas adicionales sobre SmashingMag:
2. Establecer una línea de base
3. Crear un perfil
4. Aislar el problema
5. Hazlo mas rapido
6. Minimizar los cambios de contenido
7. Perfiles de JavaScript en su aplicación

Tu sitio web funciona. Ahora hagamos que funcione más rápido. El rendimiento del sitio web depende de dos cosas: qué tan rápido se carga la página y qué tan rápido se ejecuta el código que contiene.

Pequeños cambios en su código pueden tener impactos gigantescos en el rendimiento. Unas pocas líneas aquí o allá podrían significar la diferencia entre un sitio web increíblemente rápido y el temido cuadro de diálogo "Script que no responde". Este artículo le muestra algunas formas de encontrar esas líneas de código con Chrome Developer Tools.

Lecturas adicionales sobre SmashingMag:

• Cómo escribir JavaScript rápido y con memoria eficiente
• Pruebas móviles: emuladores, simuladores y depuración remota
• Creación de una extensión de Chrome "Guardar para más tarde" con herramientas web modernas
• Revisando las DevTools de Firefox

Establecer una línea de base

Veremos una aplicación sencilla llamada clasificador de colores, que presenta una cuadrícula de colores del arco iris que puedes arrastrar y soltar para mezclar. Cada punto es una divetiqueta con un poco de CSS para que parezca un círculo.

Generar los colores de mi arco iris fue un poco complicado, así que recibí ayuda de " Crear arcoíris molestos en JavaScript ".

La página se carga bastante rápido, pero todavía tarda un momento y parpadea un poco antes de pintarse. Es hora de perfilar la página y hacerla más rápida.

Comience siempre proyectos de mejora del rendimiento con una comprensión básica de qué tan rápida o lenta es su aplicación. La línea de base le permitirá saber si está realizando mejoras y le ayudará a hacer concesiones. Para este artículo, usaremos las herramientas para desarrolladores de Chrome.

El generador de perfiles es parte de Chrome Developer Tools, que siempre está disponible en Chrome. Haga clic en el menú "Herramientas" debajo de la pequeña llave inglesa para abrirlo. Firebug también tiene algunas herramientas de creación de perfiles, pero los navegadores WebKit (Chrome y Safari) son mejores para crear perfiles de código y mostrar líneas de tiempo. Chrome también ofrece una excelente herramienta para el seguimiento de eventos, llamada Speed ​​Tracer .

Para establecer nuestra línea de base, comenzaremos a grabar en la pestaña "Línea de tiempo", cargaremos nuestra página y luego detendremos la grabación. (Para comenzar a grabar una vez que las Herramientas para desarrolladores de Chrome estén abiertas, haga clic en la pestaña "Línea de tiempo" y luego en el pequeño ícono del círculo negro para "Grabar" en la parte inferior de la ventana). Chrome es inteligente al no comenzar a grabar hasta que se inicia la página. cargar. Lo ejecuto tres veces y tomo el promedio, en caso de que mi computadora funcione lentamente durante la primera prueba.

Mi línea de base promedio, es decir, el tiempo entre la primera solicitud de la página y el pintado final de la página en el navegador, es de 1,25 segundos. Eso no está mal, pero no es genial para una página tan pequeña.

Quiero que mi código se ejecute más rápido, pero no estoy seguro de qué lo hace lento. El perfilador me ayuda a descubrirlo.

Crear un perfil

La línea de tiempo nos dice cuánto tiempo tardó en ejecutarse nuestro código, pero eso no nos ayuda a saber qué sucede mientras se ejecuta. Podríamos hacer cambios y ejecutar la línea de tiempo una y otra vez, pero eso es simplemente filmar en la oscuridad. La pestaña "Perfiles" nos brinda una mejor manera de ver qué está pasando.

Los perfiladores nos muestran qué funciones toman más tiempo. Hagamos nuestro perfil básico cambiando a la pestaña "Perfiles" en Chrome Developer Tools, donde se ofrecen tres tipos de perfiles:

1. Perfil de CPU de JavaScript Muestra cuánto tiempo de CPU está tomando nuestro JavaScript.
2. Perfil del selector CSS Muestra cuánto tiempo de CPU se dedica a procesar selectores CSS.
3. Instantánea del montón Muestra cómo nuestros objetos JavaScript utilizan la memoria.

Queremos hacer que nuestro JavaScript se ejecute más rápido, por lo que usaremos el perfil de CPU. Iniciamos el perfil, actualizamos la página y luego detenemos el generador de perfiles.

Lo primero que queda claro en el perfil es que están pasando muchas cosas. El clasificador de colores utiliza jQuery y jQuery UI, que hacen muchas cosas como administrar complementos y analizar expresiones regulares. También puedo ver que dos de mis funciones están en la parte superior de la lista: decimalToHexy makeColorSorter. Estas dos funciones ocupan un total del 13,2% del tiempo de mi CPU, por lo que son un buen lugar para empezar a realizar mejoras.

Podemos hacer clic en la flecha al lado de las llamadas a funciones para abrir la pila completa de llamadas a funciones. Al expandirlos, veo que decimalToHexse llama desde makeColorSortery makeColorSorterse llama desde $(document).ready.

Aquí está el código:

$(document).ready(function() { makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121); makeSortable();});

Saber desde dónde se llaman también deja claro que hacer que los colores se puedan ordenar no es mi mayor problema de rendimiento. Los problemas de rendimiento resultantes de la adición de muchos elementos ordenables son comunes , pero mi código está tomando más tiempo para agregar elementos DOM que para hacerlos ordenables.

Quiero empezar a hacer que esas funciones sean más rápidas, pero primero quiero aislar mis cambios. Suceden muchas cosas cuando se carga la página y quiero sacar todo eso de mi perfil.

Aislar el problema

En lugar de cargar el clasificador de colores cuando el documento esté listo, haré una segunda versión que espera hasta que presione un botón para cargar el clasificador de colores. Esto lo aísla de la carga del documento y me ayuda a perfilar solo el código. Puedo volver a cambiarlo una vez que haya terminado de ajustar el rendimiento.

Llamemos a la nueva función testColorSortery vincúlela a un botón en el que se puede hacer clic:

function testColorSorter() { makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121); makeSortable();}

buttonClick me/button

Cambiar la aplicación antes de crear el perfil podría alterar el rendimiento de la aplicación de forma inesperada. Este cambio parece bastante seguro, pero aún quiero ejecutar el generador de perfiles nuevamente para ver si cambié algo más accidentalmente. Crearé este nuevo perfil iniciando el generador de perfiles, presionando el botón en la aplicación y luego deteniendo el perfil.

Lo primero que hay que notar es que la decimalToHexfunción ahora tarda el 4,23% del tiempo en cargarse; es en lo que el código dedica más tiempo. Creemos una nueva línea de base para ver cuánto mejora el código en este escenario. Todo sobre Golf

Se producen algunos eventos antes de presionar el botón, pero solo me importa cuánto tiempo pasó entre las veces que se hizo clic con el mouse y el navegador pintó el clasificador de colores. Se hizo clic en el botón del mouse a 390 milisegundos y el evento de pintura ocurrió a 726 milisegundos; 726 menos 390 equivale a mi línea base de 336 milisegundos. Al igual que con la primera línea de fondo, la recorrí tres veces y tomé el tiempo promedio.

En este punto, sé dónde buscar y cuánto tiempo tarda en ejecutarse el código. Ahora estamos listos para comenzar a solucionar el problema.

Hazlo mas rapido

El generador de perfiles solo nos dice qué función está causando el problema, por lo que debemos investigarla y comprender qué hace.

function decimalToHex(d) { var hex = Number(d).toString(16); hex = "00".substr(0, 2 - hex.length) + hex; console.log('converting ' + d + ' to ' + hex); return hex;}

Cada punto en el clasificador de colores toma un valor de color de fondo en formato hexadecimal , como #86F01Bo #2456FE. Estos valores representan los valores rojo, verde y azul del color. Por ejemplo, tiene un color de fondo #2456FE, lo que significa un valor rojo de 36, un valor verde de 86 y un valor azul de 254. Cada valor debe estar entre 0 y 255.

La decimalToHexfunción convierte estos colores RGB en colores hexadecimales que podemos usar en la página.

La función es bastante simple, pero dejé un console.logmensaje allí, que es solo un código de depuración que podemos eliminar.

La decimalToHexfunción también agrega relleno al comienzo del número. Esto es importante porque algunos números de base 10 dan como resultado un solo dígito hexadecimal; 12 en base 10 es C en hexadecimal, pero CSS requiere dos dígitos. Podemos acelerar la conversión haciéndola un poco menos genérica. Sé que los números que se van a completar tienen cada uno un dígito, por lo que podemos reescribir la función de esta manera:

function decimalToHex(d) { var hex = Number(d).toString(16); return hex.length === 1 ? '0' + hex : hex; }

La versión tres del clasificador de colores cambia la cadena solo cuando necesita el relleno y no tiene que llamar substr. Con esta nueva función, nuestro tiempo de ejecución es de 137 milisegundos. Al perfilar el código nuevamente, puedo ver que la decimalToHexfunción ahora toma solo el 0,04 % del tiempo total, lo que la sitúa muy abajo en la lista.

También podemos ver que la función que utiliza más CPU es e.extend.mergede jQuery. No estoy seguro de qué hace esa función porque el código está minimizado. Podría agregar la versión de desarrollo de jQuery, pero puedo ver que la función se llama desde makeColorSorter, así que a continuación hagámosla más rápida.

Minimizar los cambios de contenido

Los colores del arco iris en el clasificador de colores se generan a partir de una onda sinusoidal. El código mira un punto central en el espectro de colores y crea una onda a través de ese punto central en un ancho específico. Esto cambia los colores a un patrón de arcoíris. También podemos cambiar los colores del arcoíris cambiando la frecuencia del rojo, verde y azul.

function makeColorSorter(frequency1, frequency2, frequency3, phase1, phase2, phase3, center, width, len) { for (var i = 0; i len; ++i) { var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center); var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center); var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center); console.log('red: ' + decimalToHex(red)); console.log('green: ' + decimalToHex(green)); console.log('blue: ' + decimalToHex(blue)); var div = $('div/div'); div.css('background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue)); $('#colors').append(div); }}

Podríamos sacar más console.logfunciones. Las llamadas son especialmente malas porque cada una también llama a la decimalToHexfunción, lo que significa que decimalToHexefectivamente se llama con el doble de frecuencia de lo que debería.

Esta función cambia mucho el DOM. Cada vez que se ejecuta el bucle, agrega una etiqueta nueva diva la colorsetiqueta div. Esto me hace preguntarme si eso es lo que e.extend.mergeestaba haciendo la función. El generador de perfiles hace que sea fácil saberlo con un simple experimento.

En lugar de agregar una nueva divcada vez que se ejecuta el ciclo, quiero agregar todas las divetiquetas a la vez. Creemos una variable para contenerlos y luego agreguémoslos una vez al final.

function makeColorSorter(frequency1, frequency2, frequency3, phase1, phase2, phase3, center, width, len) { var colors = ""; for (var i = 0; i len; ++i) { var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center); var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center); var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center); colors += 'div/div'; } $('#colors').append(colors);}

Este pequeño cambio en el código significa que el DOM cambia una vez, cuando agrega todas las divetiquetas. Al probar eso con la línea de tiempo, vemos que el tiempo de ejecución entre los eventos de clic y pintura ahora es de 31 milisegundos. Este único cambio de DOM ha reducido el tiempo para la versión cuatro en aproximadamente un 87%. También podemos ejecutar el generador de perfiles nuevamente y ver que la e.extend.mergefunción ahora ocupa un porcentaje tan pequeño del tiempo que no aparece en la lista.

Podríamos hacer que el código sea un poco más rápido eliminando la decimalToHexfunción por completo. CSS admite colores RGB , por lo que no es necesario convertirlos a hexadecimal. Ahora podemos escribir nuestra makeColorSorterfunción así:

function makeColorSorter(frequency1, frequency2, frequency3, phase1, phase2, phase3, center, width, len) { var colors = ""; for (var i = 0; i len; ++i) { var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center); var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center); var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center); colors += 'div/div'; } $('#colors').append(colors);}

La versión cinco se ejecuta en sólo 26 milisegundos y utiliza 18 líneas de código, lo que antes ocupaba 28 líneas.

Perfiles de JavaScript en su aplicación

Las aplicaciones del mundo real son mucho más complejas que este clasificador de colores, pero crear perfiles sigue los mismos pasos básicos:

1. Establezca una línea de base para saber desde dónde comienza.
2. Aísle el problema de cualquier otro código que se ejecute en la aplicación.
3. Hazlo más rápido en un entorno controlado, con cronogramas y perfiles frecuentes.

Hay algunas otras reglas a seguir al ajustar el rendimiento:

1. Comience primero con las partes más lentas para obtener la mayor mejora durante el tiempo dedicado a ajustar.
2. Controlar el medio ambiente. Si cambia de computadora o realiza otros cambios importantes, ejecute siempre una nueva línea de base.
3. Repita el análisis para evitar que anomalías en su computadora distorsionen los resultados.

Todo el mundo quiere que su sitio web funcione más rápido. Tienes que desarrollar nuevas funciones, pero las nuevas funciones suelen hacer que un sitio web funcione más lento. Por lo tanto, invertir tiempo en ajustar el rendimiento vale la pena.

La creación de perfiles y el ajuste redujeron el tiempo de ejecución del clasificador de color final en más de un 92 %. ¿Cuánto más rápido podría ser su sitio web?

(al) (km)

Explora más en

• Codificación
• javascript
• Navegadores

Tal vez te puede interesar:

1. 50 herramientas útiles de JavaScript
2. 50 nuevas herramientas de JavaScript que mejorarán su flujo de trabajo
3. Herramientas, bibliotecas y complementos útiles de JavaScript y jQuery
4. Herramientas útiles de HTML, CSS y JavaScript que hacen prácticamente de todo

Creación de perfiles de JavaScript con las herramientas para desarrolladores de Chrome

Lecturas adicionales sobre SmashingMag:Establecer una línea de baseCrear un perfilAislar el problemaHazlo mas rapidoMinimizar los cambios de contenidoPerfiles

programar

es

https://aprendeprogramando.es/static/images/programar-creacion-de-perfiles-de-javascript-con-las-herramientas-para-desarrolladores-de-chrome-798-0.jpg

2024-09-18

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente