Showing posts with label Navegadores. Show all posts
Showing posts with label Navegadores. Show all posts

Friday, March 4, 2011

Real world JavaScript solution

This is the final look of the code to solve the nasty performance problems with the instant search.

if(!$.browser.msie) { /* SORRY, BUT IE IS *SLOW* WITH JQUERY */
    uls = $("#metrics ul:visible"); /* Nasty hack: */
    uls.hide();                     /* 500x speedup on Chrome */
    if(text == "") {
        $(field_search).parents(".search_realm").find(".search_item").show();
    } else {
        $(field_search).parents(".search_realm").find(".search_item[id*="+text+"]").show();
        $(field_search).parents(".search_realm").find(".search_item:not([id*="+text+"])").hide();
    }
    uls.show();
} else { /* IE SPECIFIC ALGORITHM (x10 speedup on IE) */
    $( field_search ).parents(".search_realm").find(".search_item").each(function(){
        if(this.id.indexOf(text) == -1){
            $(this).hide();
        } else {
            $(this).show();
        }
    });
}


So, what happened here?
1. The horrible, horrible Chrome performance was due to a too-early rendering attempt. Hiding the containing ul makes Chrome stop trying to render after each element "reappears" and causes no flicker on the screen. The time goes from 12000ms to ~70ms for a 1549 element set.
2. IE didn't like jQuery. Well, don't make it use jQuery. Simple, huh? ;)
Now Chrome is an absolute performance champion with times 30/70, where as IE stays in the 320's and firefox in the 300/150's.

Thursday, March 3, 2011

Real world JavaScript performance mess

For a change, a post that is neither a rant nor a joke. Yes, I can hear people leaving already...

Well, I wanted to show a funny fact about JavaScript performance in a real-world case. The task is quite simple. I have a ul with 1549 (!) li elements, each with a unique id. I want to show only those whose id contains a certain substring (instant search).

For this task I have two candidates, either using jQuery selectors or "manually" filtering the list. The code is as below:

$(field_search).parents(".search_realm").find(".search_item").each(function(){
    if(this.id.indexOf(text) == -1){
        $(this).hide();
    } else {
        $(this).show();
    }
});


The jQuery option is:
$(field_search).parents(".search_realm").
            find(".search_item[id*="+text+"]").show();
$(field_search).parents(".search_realm").
            find(".search_item:not([id*="+text+"])").hide();

As you can see, it's not that complicated. Of course, suggestions accepted ;)

Now let's see the results (Hide/Show) in ms, averaged over multiple runs:
Manual         jQuery       [Browser Version]
Firefox Linux:   510/810        350/750      3.6.13
Firefox WinXP:   240/589        114/550      3.6.13
Chromium Linux: 1680/14320       35/14600    9.0.597.94
Chrome WinXP:   2340/12500       60/12600    9.0.597.107
IE7:             320/320        410/3000     7.0.5730.13

jQuery version: 1.4.4, 1.5.1 (minified)

That's right, no typos there. Weird facts:
  1. Chrome is slower than firefox in 3 out of 4 cases, 2 of them being a trainwreck case.
  2. Showing the previously hidden li elements takes significantly longer than the opposite except in IE7, manual method. In Chrome showing things back takes 10x more time, 500x (!) jQuery case.
  3. jQuery makes it slighty faster for Firefox, variable on Chrome, slower on IE7.
  4. Firefox on Windows is faster than on Linux. For Chrome results are mixed.
  5. Chrome is both the best and worst performer, by an order of magnitude in both cases.
  6. IE7 is capable of the fastest time to show the elements back, Chrome the slowest. Firefox is neither, but it's the best on average.
The performance fight is far from being over...

Update: In the end, after some hacks, Chrome wins the battle...

Thursday, September 13, 2007

Lío de navegadores

Son algo curioso, los exámenes. Cuando estás estudiando, ves mil cosas en Internet que te interesan, se te ocurren otras mil que hacer en cuanto acabes y literalmente te faltan manos y ojos para todo lo que te gustaría hacer a la vez. Y sorprendentemente, en cuanto acaban, junto con todo lo que has estudiado, se te olvida también todo lo que querías hacer. Para los exámenes de febrero me haré una lista.

Bien, ahora al tema... más o menos. Ya que aún no me he presentado (¿lo haré algún día?) he de decir que hasta hace nada mi ordenador principal era un Sony Vaio SZ1XP con el XP original, con toda la mierda de fabrica desinstalada y para navegar usaba el Seamonkey.

Volviendo al tema de las cosas por hacer, yo he empezado por limpiar. Tenía el escritorio de mi XP hasta arriba de howtos, vídeos, apuntes, exámenes de años anteriores, links, ejemplos de código y demás fauna silvestre. Si estuvieran en mi escritorio real, esto es, en la mesa de mi cuarto, lo que yo y cualquiera haría sería tirarlo todo al cajón para obtener una limpieza fácil y rápida. A falta de cajones, la carpeta Mis Documentos bien me sirve para ello.
Un vez limpito todo, me puse a trastear por la web, a ver si me acordaba de algo y en mi página de inicio vi un feed interesante de slashdot. Lo expandí y me puse a leerlo y en mitad de la lectura despareció el texto y salió "La información no se encuentra disponible". Como no era la primera vez que pasaba decidí abandonar Google y buscar algo mejor. Como hace tiempo vi que un amigo usaba netvibes me registré y lo estuve probando. Una maravilla, muchísimo mejor que iGoogle. Y cómo no, la opción de personalizar no pasó desapercibida y los skins que tiene son otra maravilla. Pero claro, el bonito skin negro del netvibes no pegaba nada con el modern del mozilla. Sabía que skins para seamonkey hay poquitos, pero es que los pocos que había han dejado de funcionar con las nuevas versiones. Así que decepcionado y con tiempo libre ya tenía algo que hacer.
Como los navegadores maduros se pueden contar con los dedos de una mano (bueno, y media) no iba a ser muy complicado.
Primer candidato: Safari 3. Lo había probado en el curro unos días antes en el PC de un compañero. Súper bonito, pero aun en fase beta, un pelín inestable y por lo que vi en la web, sin posiblidad de skins.
Segundo candidato: Opera. Los recientes comentarios sobre la v9.5 alpha sonaban muy bien y tenía ganas de probarlo. Trasteando por la web vi que tenía posiblidad de skins y me baje la estable, v9.23, para probar. ¡Y qué navegador! Me ha dejado impresionado. Cientos de skins súper currados, widgets, pestañas avanzadas, cliente torrent integrado, gran gestor de descargas y cosas que aun no he probado como gestos de ratón. Lo mejor son las pestañas. Si algo me mantenía usando seamonkey en lugar de firefox eran las pestañas. Nada de Ctrl + T para abrir pestañas. Se teclea la url, Cntrl + Enter y voilá, nueva pestaña con la url. Nada de teclear las busquedas en la barra de Google de la derecha. Se teclean los términos donde siempre, flecha arriba, Enter (o Cntrl + Enter para pestaña nueva) y voilá, tenemos la búsqueda. En el opera es incluso mejor. Si ponemos "g cosa" busca "cosa" en Google. Con "y cosa" busca "cosa" en Yahoo. Con Shift + Enter lo abre en una pestaña nueva y con Ctrl + Shift + Enter, en una pestaña nueva en segundo plano. Im - presionante. Tan sencillo y tan, tan cómodo. Y lo mismo para los links. Pero tantas cosas buenas tienen su punto en contra. Justo cuanto iba a postear todas estas maravillas... blogger no funciona con opera. Vaya desilusión, resulta que opera tampoco es "el navegador definitivo". Mientras espero al Opera 9.5 seguiré usando Seamonkey para bloguear y Opera para navegar.
Me he quedado tan satisfecho con Opera que he dejado de buscar y he decidido no probar Netscape (si, sigue vivo) y alguno otro que quedaba por ahí. Y los dos mas populares: IE7 y Firefox ya estaban descartados por su gestión de pestañas y urls.

Ah, y ya de paso, con el Opera y el netvibes en negro, mis ventanas de XP originales y fondo de escritorio en azul no pegaban, así que también los cambié. Ya que estaba... Aquí os dejo unas capturas del resultado final del invento:

Escritorio:

Menú inicio:


Netvibes en Opera:

Bueno, ya está bien por hoy. Ya toca cerrar el viejo Seamonkey y navegar un poco con el flamante Opera antes de dormir.
Hasta la próxima!

PD: en el anterior post, el codigo está un poco mal. Donde pone ptr->s debería poner sólo s. Fallo mío al adaptar el código original. No lo edito porque blogger y el código en C se odian y sale deformado en la edición :(