aNieto2K » Curiosidades

SWYM, di lo que sientes

aNieto2k — Sat, 02 Jan 2010 10:29:32 +0000

De los editores WYSIWYM (What You See Is What You Mean) aparece SWYM ( Say What You Mean) un pseudo lenguaje de programación desarrollado sobre Javascript para facilitar algunas tareas.

// Ejemplo de uso
SWYM.Eval(codigo);

Int.toBits: [1,2,4,etc..<=this].Where{(this/it)%2 >= 1};
89.toBits
// [1,8,16,64]

List.MyPrefix: LazyList(.length)
{
 [this.at(0..it)]
}

each-MyPrefix-of[100..106]
// [100]
// [100,101]
// [100,101,102]
// [100,101,102,103]
// [100,101,102,103,104]
// [100,101,102,103,104,105]
// [100,101,102,103,104,105,106]

Como podemos ver, no algo que vayamos a usar en nuestros proyectos, pero resulta un experimento realmente interesante que muestra el potencial de Javascript, aunque el mismo autor comenta que lo implementó pensando en que funcionara, no en que funcionara rápido. Sin duda un gran ejercicio de programación.

Rendimiento extremo de Javascript

aNieto2k — Tue, 10 Nov 2009 12:25:33 +0000

En uno de esos momento de querer pulir scripts en Javascript me pegó la neura de probar diferente formas de hacer lo mismo sacando el cronómetro y midiendo tiempos para ver que era más eficiente y que lo era menos. Al final, por esas cosas del destino, me tuve que ir al final terminé olvidándome de lo que quería hacer. Hasta ahora que me he encontrado con esta presentación de Thomas Fuchs (author de Script.aculo.us). En ella (la recomiendo) hace exáctamente lo que yo quería hacer, medir los tiempos de ciertas tareas cotidianas y compararlas con alternativas que nos ofrece el mismo resultado. Algunos de los resultados muestran cosas realmente interesantes:

Rendimiento

Objetos literales frente a clásicos

// Más lento
function literals(){
 var a = [], o = {};
}
// Más rápido
function classic(){
 var a new Array, o = new Object:
}

En la presentación se ven los resultados sobre los diferentes navegadores y podemos ver como de usar uno u otro en Google Chrome podemos multiplicar por 2 el tiempo de proceso.

Loops

Los loops tambien muestran unos resultados curiosos:

var test = '';
for (var i = 0; i<10000; i++)
 test = test + str;

var test = '', i = 10000;
while(i--) test = test + str;

Entre los dos anteriores, no se muestran diferencias en los resultados devueltos.

// Más lenta
function normalLoop(){
 var i = 60, j = 0;
 while(i--) j++;
}

// Más rápida
function unrolledLoop(){
 var j = 0;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
}

Tambien vemos que muy caro hacer un loop, en Firefox multiplicamos por 2 el tiempo y en Google Chrome lo multiplicamos por 5.

Cachear variables globales

// Más rádida
function cache(){
 var w = window, i = 10000;
 while(i--) w.test = 'test';
}

// Más lenta
function nocache(){
 var i = 10000;
 while(i--) window.test = 'test';
}

El cachear variables globables nos ayudará en la mayoría de casos.

Acceder a atributos de un objeto frente a `with()`

// Más lento
function conwith(){
 var obj = { prop: 'test', str: '' };
 with(obj){
 var i = 10000;
 while(i--) str += prop;
 return str;
 }
}

// Más rápido
function sinwith(){
 var obj = { prop: 'test', str: '' }, i = 10000;
 while(i--) obj.str += obj.prop;
 return obj.str;
}

En los resultados nos muestra que usar with() para acceder a un objeto nos puede penalizar el tiempo de proceso de nuestro Javascript. En el caso de Google Chrome reducimos el tiempo a un 7% del empleado con with().

Pasar a bits frente a `parseInt()`

// Más lenta
parseInt(12.50);

// Más rápida
~~(1 * "12.5");

Javascript 1.5 integra una serie de operadores a nivel de bit, entre ellos nos encontramos ~(Alt Gr + 4) que representa el NOT a nivel de bit y que en este caso nos ayuda a convertir a entero una cadena como podemos ver en el ejemplo (haciendo un doble NOT para obtener un valor positivo).

Curiosidades del lenguaje

Diferencia entre `&&` y `||`

var n = 1;
if (true && (n=2)) ...;
console.log(n);
// --> n = 2
if (true || (n=3)) ...;
console.log(n);
// --> n = 2

Como es lógico, el uso de && evalua las dos condiciones frente a || que si ya se cumple la primera, nos evitamos comprobar la segunda.

`(...).toString()`

(function(){ return 2 * 3; }).toString();

// IE, Safari y Google Chrome
function(){ return 2 * 3; }

// Firefox
function(){ return 6; }

En este ejemplo vemos como la ejecución de esta función anónima nos muestra un resultado algo extraño en Firefox.

Más info

Hola mundo en canvas

aNieto2k — Thu, 10 Sep 2009 07:20:37 +0000

En Carsonified.com nos muestran un interesante tutorial con el que iniciarnos en el uso de mediante Javascript.

// Comprobamos que if(drawingCanvas && drawingCanvas.getContext) {
 // Inicializamos el lienzo 2D
 var context = drawingCanvas.getContext('2d');

// Creamos la cara amarilla
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFF00";
 context.beginPath();
 context.arc(100,100,50,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 // Añadimos 2 ojos verdes
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(80,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(80,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(120,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(120,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 // Creamos una nariz con firma de diamante
 context.fillStyle = "#000000";
 context.beginPath();
 context.moveTo(93,100);
 context.lineTo(100,93);
 context.lineTo(107,100);
 context.lineTo(100,107);
 context.closePath();
 context.fill();

 // Añadimos la sonrisa                   
 context.strokeStyle = "#000000";
 context.beginPath();
 context.moveTo(70,110);
 context.quadraticCurveTo(100,150,130,110);
 context.quadraticCurveTo(100,150,70,110);                
 context.closePath();
 context.stroke();
}

Este código, nos permite generar la cara amarilla que vemos en el "Hello World" que vemos debajo:

(Ver Imagen) Mucho código pero muchas posibilidades.

Navegadores modernos: ¿para que tanta velocidad?

aNieto2k — Tue, 11 Aug 2009 15:34:44 +0000

Con la llegada de Google Chrome, parece que la palabra "velocidad" se ha puesto de moda. ¿Pero realmente necesitamos tanta velocidad? He estado haciendo unas pruebas muy rústicas, osea he copiado la página de Yahoo! España en una copia local y le he añadido 2 líneas de Javascript, una al inicio de la página y otra al final de la misma.


[...] // Toda la página

Misteriosamente, tiene un par de

aNieto2K » Curiosidades

SWYM, di lo que sientes

Artículos relacionados

Rendimiento extremo de Javascript

Rendimiento

Objetos literales frente a clásicos

Loops

Cachear variables globales

Acceder a atributos de un objeto frente a `with()`

Pasar a bits frente a `parseInt()`

Curiosidades del lenguaje

Diferencia entre `&&` y `||`

`(...).toString()`

Más info

Artículos relacionados

Hola mundo en canvas

Artículos relacionados

Navegadores modernos: ¿para que tanta velocidad?

aNieto2K » Curiosidades

SWYM, di lo que sientes

Artículos relacionados

Rendimiento extremo de Javascript

Rendimiento

Objetos literales frente a clásicos

Loops

Cachear variables globales

Acceder a atributos de un objeto frente a with()

Pasar a bits frente a parseInt()

Curiosidades del lenguaje

Diferencia entre && y ||

(...).toString()

Más info

Artículos relacionados

Hola mundo en canvas

Artículos relacionados

Navegadores modernos: ¿para que tanta velocidad?

Acceder a atributos de un objeto frente a `with()`

Pasar a bits frente a `parseInt()`

Diferencia entre `&&` y `||`

`(...).toString()`