(function() {

PRIMA:

DOPO:

Dal lavoro sui metodi ho capito cosa rende lento il plugin. Ho meglio più che lento, cosa inficia maggiormente sul tempo di esecuzione di YCodaSlider 2.0:

Benchmark

Il metodo nav() impiega circa 130ms per essere eseguito (firefox 2.0).

    nav    :   function(el){
        var jViewer = jQuery("div.yslider-viewer",el);
        jViewer.before('<div class="yslider-navl"><a href="#">Left</a></div>');
        jViewer.after('<div class="yslider-navr"><a href="#">Right</a></div>');
        jViewer.before('<div class="yslider-nav"><ul><\/ul></div>');
        var jNav = jQuery("div.yslider-nav ul",el);
        var jPanels = jQuery("div.yslider-panel",el);
        jPanels.each(function(n) {
            var lp = jQuery("div.yslider-panelwrapper",this).attr("title") || (n+1);
            if(el.ycodaslider.options.history){
                 jQuery('<li><a href="#' + (n + 1) + '">' + lp + '</a></li>').appendTo(jNav);
            }else{
                jQuery('<li><a href="#">' + lp + '</a></li>').appendTo(jNav).click(function(){
                   return false;
                });
            }
        });
        //setto la larghezza del menu qui.
        jNav.find("li").each(function(nr){
            el.ycodaslider.nw += jQuery(this).width();
        });
        if(el.ycodaslider.options.width)
            jNav.parent().css({"width" : el.ycodaslider.options.width});
        else
            jNav.parent().css("width" , el.ycodaslider.nw);

    }

Commentando questo ottengo un centinaio di ms di risparmio

//questo costa 100ms!
jNav.find("li").each(function(nr){
    el.ycodaslider.nw += jQuery(this).width();
});

Innanzitutto non c’è bisogno di calcolare la larghezza dei tag LI per avere una corretta larghezza del contenitore.
In ogni caso il metodo width applicato ad un elemento che non ha una larghezza impostata da css è notevolmente lento.
Penso che calcoli il numero di caratteri per il font per ottenere una larghezza in pixels.

Non usare il metodo width se non è settata la proprietà css width.

Ora il metodo viene eseguito in 12ms.

Benchmark

el.ycodaslider.nw = el.ycodaslider.pc * 2;

el.ycodaslider.nw = el.ycodaslider.pw;//el.ycodaslider.pc * 2 ?

Veniva calcolata la larghezza del navigatore moltiplicando per due il numero dei pannelli. Perchè?
Non lo so. Refuso.

In realtà la larghezza del navigartore è uguale alla larghezza del pannello.

Correggendo questo valore ho modificato il metodo nav al fondo con questo:

if(el.ycodaslider.options.width){
      jNav.parent().css({"width" : el.ycodaslider.options.width});
}else{
     jNav.parent().css("width" , el.ycodaslider.nw );
}

Ecco il benchmark aggiornato con il metodo nav e il metodo count corretti.

Benchmark

Notare come il lunghissimo metodo bindings non pesi niente. Grazie alle clousure infatti praticamente il codice viene attaccato all’handler e verrà valutato solo al bind dell’evento.

Ma per questo bisogna ringraziare jQuery e John Resig.