Entendiendo JPU.

JPU es un pequeño script escrito por Andrea Giammarchi hace ya un tiempo. Lo descubrí por primera vez cuando noté una barrita que subía y bajaba en su blog. Si no has oído de él, JPU sirve para medir la actividad del cpu. Concretamente, a mayor actividad, mayor incremento en las barritas. Para ver un ejemplo, visita el blog de Andrea y mira en la esquina superior derecha. Hoy me sentí un poco destripador y recordé ese juguete y decidí ver como funcionaba. Debo decir que es sumamente sencillo, pero ingenioso. El mérito aquí no está en la complejidad del código sino en la complejidad de la idea; no a cualquiera se le habría ocurrido.

Veamos primero el código:

/* (C) Andrea Giammarchi */
(
 function(J,P,U){
     var a='appendChild',
     c='createElement',
     e='addEventListener',
     d=document,
     l="load",
     w=window,
     f=function(){
         var i=setInterval(function(l){
             l=1;
             D=new Date-D;
             if(D>700)l++;
             if(D>650)l++;
             if(D>600)l++;
             if(D>550)l++;
             s(J=l<J?--J:l);
             D=new Date
         },500),
         b=d.body,
         s=function(){
             I.className=U+J
         },
         I=d[c]('p'),
         C=d[c]('link'),
         D=new Date;
         C.rel='stylesheet';
         C.type='text/css';
         C.href=P+U+'.css';
         s(b[a](C),b[a](I));
         /*@cc_on setInterval(function(){I.style.top=document.body.scrollTop+"px"},50)@*/
     };
     w[e]?w[e](l,f,false):w.attachEvent("on"+l,f)
 }
)(5,'http://www.3site.eu/JPU/','JPU');

Como verás, lo primero que llama la atención es un setInterval, sin mencionar el estilo que tiene para escribir. Ese setInterval es precisamente donde toda la magia sucede. Dependiendo de cuanto tarde el intervalo en ejecutarse, es el uso del cpu. Esto por que es bien sabido que Javascript es capaz de ejecutar solo un proceso a la vez, de modo que un intervalo como este que se repite cada 500 milisegundos, puede no repetirse exactamente a los 500 milisegundos si el motor está ocupado en otra cosa. Es por eso que muchas veces cuando se ven animaciones hechas en javascript parece que van saltando en lugar de deslizándose. Dependiendo del tiempo extra que tarde el intervalo en ser ejecutado, se le asigna una clase al elemento p que es creado por el script al inicio. Una hoja de estilos, la cual es agregada dinámicamente por el script, se encarga de posicionar el background del elemento p de modo que se vean mas o menos barritas simulando así el incremento del uso en el CPU.

Sin duda que es un método muy ingenioso para reflejar el uso del cpu de forma no intrusiva. Entre otras cosas, podemos aprender el estilo de programar y de escribir de Andrea, además de su excepcional uso de las peculiaridades de javascript como lo es el uso de la notación de corchetes para llamar métodos de document.

El script podría parecer difícil de leer para alguno, pero es solo por que se han reemplazado los elementos con los que estamos acostumbrados por variables, de modo que document se convierte en d.

Que piensas tú de JPU?