Entries Tagged 'Javascript' ↓

Web Workers Use Case – Loading Data Files

I spent last week rebuilding the whole javascript framework we use at work (finally I had some time for it), because the current one is a little disaster (you know, every developer had written his own stuff in different files, too much DOM access etc.)

The point is we wanted to have autocompletion for airport selection without using AJAX, but prefetching a huge file containing the whole airport list (why? ummm, not my decision). Of course the airport file is huge (around 400KB, not gzipped), so before I came to the company the guys decided to load this file via AJAX request after “dom:loaded” but still was delaying too much the first user interaction.

My second try consisted in taking advantage of Web Workers:

And it worked really well! Of course using as well an AJAX request as the fallbak for IE mostly. The major advantage is not the file transfer itself (since this should be ~ the same using a Worker object instance or an AJAX request or whatever other file loading alternative) but the time the Javascript engine consumes to treat the huge variable literal first assigment (in my case a really big Array of strings), where with a Worker gets done without blocking the execution of the rest of your javascript code.

I just did something like this:

Main javascript file

if(!!window.Worker) {
    var worker = new Worker('myWorker.js');
    worker.onmessage = success;
}

Worker file

if(!IE) {
    postMessage(hugeArray);
}

So the success method gets executed just after the Worker loaded the file with the airport list and had ready the hugeArray variable to be treated by my autocompleter functionality. The performance got considerably increased (in my case something like 10 times faster in FF and 3 times faster in Chrome 6).

Comprobar Propiedades de Objetos

Hace un par de días leí este interesante artículo acerca de la comprobación de la existencia de una propiedad en un objeto de Javascript.

Y Nicholas claramente llegaba a la conclusión de que cuando se quiere comprobar la existencia de la propiedad independientemente de si se trata de un atributo propio o heredado del prototype del “objeto padre” (por llamar de alguna forma a la función a partir de la cual se construyó), la mejor opción es:

(atributo in objeto)

Y si lo que necesitas es comprobar un atributo propio del objeto (no heredado, es decir, definido sobre el objeto directamente y no existente en el “objeto padre”) puedes usar hasOwnProperty(). Pero por supuesto teniendo en cuenta una serie de restricciones como bien apuntaba Kangax:

- Cuidado con los Host Objects.
- Cuidado con propiedades definidas en ambos objetos al mismo tiempo.
- Y cuidado con algunas implementaciones del standard ECMAScript.

En definitiva, la cuestión es saber lo que estás haciendo y echarle un vistazo de vez en cuando al standard, además de comprobar resultados en los distintos navegadores antes de dar por cierta cualquier afirmación (eso es lo que tiene Javascript, nunca puedes estar seguro al 100% en el 99.9% de las situaciones).

Funny Javascript (Nobody is Perfect!)

javascript as the rest of the programming languages has good and bad parts.

Here it goes some funny conditions results that make us think about why didn’t we choose working as lawyers, doctors or whatever other time consuming occupation but programmer:

"" == "0"     // false

0 == ""      // true

0 == "0"    // true

null == undefined      // true

" \t\r\n " == 0      // true

You can play and check the previous expressions here:

Result

true