Speedy js: 1. Web Performance

Primera entrada de una serie dedicada a la optimización del código web

Fernand Léger

archivado en: JavaScript / 24 octubre, 2015 / taller:

Para Nacho, Nico y Alberto

Durante años, la mayor preocupación en el desarrollo web fue el peso de las cosas. En general, la calidad de la conexión era infame y 120kb arriba o abajo suponían un impacto tremendo en la experiencia de usuario. Cuando la situación había cambiado y la banda ancha se había universalizado, al menos en los sitios de trabajo y en muchos hogares, apareció otro actor en escena con nuevos retos: los dispositivos móviles. Hoy en día, la proliferación de estos cacharros y el hecho de que cada vez se usen más para navegar por Internet obliga a tenerlos en cuenta en el desarrollo de páginas o aplicaciones web, y más aún si incluimos otros dos elementos en la foto: cada día aumenta el trabajo que debe realizar el front en detrimento del back y el creciente auge de las aplicaciones híbridas.

En síntesis: no queda más remedio que optimizar los proyectos web para que funcionen bien en dispositivos móviles, unos artefactos donde el trabajo que debe realizar el navegador puede provocar verdaderos desastres si sobrepasa determinados límites, como cerrar directamente el navegador si estamos en el safari de un ipad o provocar una navegación stop motion si estamos con una samsung galaxy.

Espero por lo tanto que resulte útil esta serie que empiezo con esta entrada sobre estrategias y métodos para optimizar el código web en general, aunque sobre todo me centraré en javaScript, que de html y css ya hay mucho escrito por la red.

Performance.now()

Existen herramientas muy potentes para analizar la velocidad con se ejecuta el código js, que es uno de los síntomas más relevantes sobre el rendimiento de un desarrollo web, como el Timeline de la propia consola del chrome, sin ir más lejos; sin embargo, me ha parecido interesante comenzar esta serie con el api Web Performance, que funciona a partir del explorer 10 y, claro está, en los navegadores evergreen, pues es un buen «Hola Mundo» para empezar a concienciarse sobre las consecuencias de tirar líneas sin cuidado.

Web Performance se basa en la precisión del temporizador DOMHighResTimeStamp que calcula el tiempo en milésimas de milisegundos, lo que permite parametrizar el rendimiento de cualquier proceso js de forma muy fiable. Este dato lo obtenemos con su método principal performance.now(), una especie de Date.now(), pero a lo bestia.

El mecanismo es sencillo: tomamos una muestra (took) antes de empezar un proceso, lo hacemos y volvemos a tomar otra muestra. La diferencia entre la primera y la segunda es el tiempo que ha tardado en realizarse. Por ejemplo, así podríamos saber que esta función se demora unos 0.11999999999999922 en ejecutarse:

function foo() {

var counter = 0;

for (var i=0; i<10000; i++) {

counter++;

}

}

var t0 = performance.now();

foo();

var t1 = performance.now();

console.log("El proceso foo llevó " + (t1 - t0) + " milisegundos.");

Sin embargo, si añadimos un console.log() en el bucle, que es un proceso muy laborioso, la cuenta asciende una barbaridad:

function foo() {

var counter = 0;

for (var i=0; i<10000; i++) {

counter++;

console.log(counter); // <---- Muelte!!!

}

}

var t0 = performance.now();

foo();

var t1 = performance.now();

console.log("El proceso foo llevó " + (t1 - t0) + " milisegundos.");

// El proceso foo llevó 1501.1150000000002 milisegundos.

Como vemos, usar performance.now() durante el desarrollo puede resultar muy útil para probar pequeñas cosas en tiempo real y así terminar de decidir si hacemos un proceso de una manera u otra.

Bueno, pues por hoy lo dejo aquí, que marcho a Valladolid a comer en el grastrolava, cuya cocina lleva mi hermano Uri, un chef espectacular.

Bonus

Para evitar que se nos escapen console.logs() en producción un truco es incluirlos siempre en condicionales que evalúen una variable global donde hayamos definido el entorno (este tipo de variables conviene escribirlas en mayúsculas para recordarnos que son constantes, aunque hasta ecma 6 no existen en js).

var ENVIROMENT = "develop";

if ( ENVIROMENT == "develop" ) {

console.log("Soy un simpático console.log");

}

|| Tags: , ,

valoración de los lectores sobre Speedy js: 1. Web Performance

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (4 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “Speedy js: 1. Web Performance

  1. Muy interesante a la hora de decidir la mejor forma de optimizar un proceso y no “tirar líneas sin cuidado” ;p

    En aplicaciones híbridas hay que incluir las que, además de la propia aplicación, se pretenden hacer funcionar dentro de un moodle, por ejemplo, con los conflictos que ello pueda implicar.

    Gracias por la idea.

Aportar un comentario


*