BENCHMARK:

PRIMA

METODI:

PRIMA

Benchmark 1
Benchmark 2
YCodaSlider 2.0rc2 – SVN – rev 121

YCodaSlider 2.0rc2 out.
DEMO SITE

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.

Modificando il plugin benchmark, ho trovato un sistema accettabile per adattare il plugin creato al calcolo del “peso” dei metodi di un plugin. Qui la verisione usata: svn

metodi

Ecco il risultato:

Il widget non è nascosto. E’ visibile. Ho capito che lavorare su elementi nascosti è sviante.. E’ vero ci impiega meno, ma se utilizzi i metodi width() e height() questi forniranno dati sbagliati e di fondo il codice sbaglia nellìeseguire le funzioni.

I risultati mi sembrano attendibili. Ogni metodo ha un suo peso.

I test sono stati effettuati su firefox 2.0 con firebug attivo.
Con firefox 3.0 gli stessi test sono nettamente più veloci (evviva!)

Nav è il primo metodo da rifattorizzare.

Perchè questo plugin?
Secondo molti se io salvo un dato in un elemento DOM all’interno di una proprietà “expando” in fase di lettura sarò più veloce rispetto ad avere lo stesso dato in un attributo html.

Il plugin sembra confermare questa tesi.

Intanto cosa indica il grafico. Se spiego il grafico sarà più semplice capire come usare il plugin e testarlo per i vostri scopi.

Il grafico indica che all’aumentare degli elementi html su una pagina (in questo caso da uno a trenta immagini) effettivamente leggere un valore da un attributo html o leggere un valore dalla proprietà di un oggetto (lo stesso oggetto d’altra parte) sono due operazioni diverse e effettivamente una è più veloce dell’altra. E ci mancherebbe! La prima è un funzione di lettura/scrittura (oltretutto jQuery over DOM). La seconda è una lettura/scrittura nativa di una proprietà di un oggetto.

Le funzioni:

var mywrite = function(ref, serie){
    if(serie == 1)
        ref.original = jQuery(ref).attr("src");
    else
        jQuery(ref).attr("original", jQuery(ref).attr("src"));
}
var myread = function(ref, serie){
    if(serie  == 1){
        var read = ref.original;
        read = null;
    }else{
        var read = jQuery(ref).attr("original");
    }
}

il parametro serie indica quale test sto eseguendo. In questo caso io voglio un confronto tra “due alternative”. Avessi scritto delle funzioni più complesse potevo avere più test, e quindi più serie.
(Probabilmente cercando di influire il meno possibile sul test. La strada dell’if magari è da rivedere).

Test 0:
Scrittura:

jQuery(ref).attr(“original”, jQuery(ref).attr(“src”));

Lettura:

var read = jQuery(ref).attr(“original”);

Test 1:

Scrittura:

ref.original = jQuery(ref).attr(“src”);

Lettura:

var read = ref.original;

Ma come faccio a far eseguire queste funzioni?
Queste funzioni vengono passate al benchmark: vediamo come.

Innanzitutto questi benchmark sono “orientati al DOM” nel senso che io voglio testare la velocità di una certa azione su una pagina web.
Quindi mi serve una sorta di template html da creare per poi applicare la funzione.

var html = jQuery('<img alt="new Mikado logo 600 3D"  src="http://maxb.net/repository/images/14.jpg" />');

A questo punto setto il benchmark:

Benchmark.settings({
    maxc    : 30,
    args    : [0,1] ,
    mod     : 10,
    prepare : html
});

Questi settaggi mi dicono che

• io ho due serie di test (args).
• Che voglio testare su una pagina web formata da 30 elementi (maxc).
• In realtà i test verranno eseguiti con un elemento in più alla volta fino ad arrivare ad avere 30 elementi. Il parametro mod mi permette di saltare ogni N elementi. In questo caso verranno eseguiti 3 test uno con 10, uno con 20, uno con 30 elementi (mod)
• Che l’html da creare prima del test è contenuto nella variabile html (prepare)

Ecco il codice per il benchmark

Benchmark.each(function(nr, serie){
    jQuery(selector).benchmark({
        test    :   [ func1, func2 ] //....
    }, nr, serie);
});

La parte da personalizzare è l’array con i nomi di funzioni (o con funzioni anonime).

E il selettore.
Nel mio test ho dato da creare delle immagini. Il selettore sarà “img”.

Benchmark.each(function(nr, serie){
    jQuery('img').benchmark({
        test    :   [ mywrite , myread ]
    }, nr, serie);
});

Alla fine dei test verrà visualizzato tramite GOOGLE API CHARTS un grafico per capire al volo i risultati.

Vedere gli altri esempi :

• ATTR VS EXPANDO
• ATTR VS EXPANDO (funzioni anonime passate al benchmark)
• YCODASLIDER no pack
• YCODASLIDER pack version
• Chili 2.0 plugin (Velocissimo!)
• YCodaSlider Benchmark Explanation – NOT VALID FOR RESULTS
• CodaSlider Benchmark Explanation – NOT VALID FOR RESULTS
• CodaSlider Benchmark
• YCodaSlider Benchmark
• YCodaSlider Benchmark – Stress – 50 slider
• CodaSlider Benchmark – Stress – 50 slider

Il test mi dice che il pack dei javascript non influisce sulla velocità.
Devo provare con le librerie jQuery UI.

Un confronto tra coda-slider 1.1.1 di Niall Doherty e il mio YCodaSlider.
Tutti questi dati non hanno alcuna valenza. Spero che mi permettano di capire dove è possibile migliorare le prestazioni e evitare memory leak. (Tra l’altro il mio plugin su poche istanze è più lento.)

$Date: 2008-05-21 20:48:10 +0200 (mer, 21 mag 2008) $
$Rev: 106 $

corretto 2 bachi:
- il clone non può avere la stessa classe del target. Se si bisogna invocare il benchmark con un prefisso sul selettore target : Benchmark.prefix() + “.target”
- se il selettore seleziona più elementi di quanti il benchmark se ne aspettasse il benchmark non viene eseguito

TODO:
l’oggetto da clonare (options.prepare) deve poter essere un array in modo che ogni serie possa avere il suo clone da appendere.

/*
 *
 * Benchmark plugin 1.0
 * $Date: 2008-05-21 20:48:10 +0200 (mer, 21 mag 2008) $
 * $Rev: 106 $
 * @requires jQuery v1.2.3
 *
 * Copyright (c) 2008 Massimiliano Balestrieri
 * Examples and docs at: http://maxb.net/blog/
 * Licensed GPL licenses:
 * http://www.gnu.org/licenses/gpl.html
 *
 */

//http://www.dustindiaz.com/basement/sugar-arrays.html
Array.prototype.indexOf = function(el, start) {
    var start = start || 0;
    for ( var i=0; i < this.length; ++i ) {
        if ( this[i] === el ) {
            return i;
        }
    }
    return -1;
};

if(!window.Benchmark)
	Benchmark = {};

Benchmark = {
	show		:	false,
	start		:	false,
	finish		:	false,
	elapsed		:	false,
	flag		:	false,
	impossible	:	false,
	url			:	'http://chart.apis.google.com/chart?',
	maxv		:	0,
	maxc		:	0,
	data		:	[],
	labels		:	[],
	api			:	{},
	options 	: 	{},
	settings	:	function(options){
		Benchmark.options = jQuery.extend({
			maxc 	: 1	,//maxc : è il limite al ciclo
			args	: false	,//serie del grafico, ciclo esterno. passa parametro
			mod		: 1,	 //il benchmark salta ogni?
			prepare : false,
			clean   : true
		}, options);

		Benchmark.maxc = Benchmark.options.maxc;

		if(Benchmark.options.args === false)
			Benchmark.impossible = true;
	},
	chartapi	:	function(options){
		//http://chart.apis.google.com/chart
		Benchmark.api = jQuery.extend({
			dimensions 	: "1000x300",
			chxt		: "x,y",
			chds		: "0,",
			chxr1		: "0,0,",
			chxr2		: "1,0,",
			cht			: "lc",
			labels		: "",
			chco		: "ff0000,00ff00"
		}, options);
		Benchmark.make_url();
	},
	chart	:	function(options){
		if(Benchmark.flag === false)
			Benchmark.chartapi(options);

		var dim = Benchmark.api.dimensions.split("x");
		jQuery("body").append("<p>"+Benchmark.url+"</p>");

		jQuery("body").append('<img width="'+dim[0]+'" height="'+dim[1]+'" src="'+Benchmark.url+'" />');
	},
	make_url:	function(){
		Benchmark.url	+=	'chs=' 	+ Benchmark.api.dimensions 	+ '&';
		Benchmark.url	+=	'chxt=' + Benchmark.api.chxt 		+ '&';
		Benchmark.url	+=	'chds=' + Benchmark.api.chds 		+ Benchmark.maxv	+	'&';
		Benchmark.url	+=	'chxr='	+ Benchmark.api.chxr1 		+ Benchmark.maxc	+	'|'	+ Benchmark.api.chxr2 + Benchmark.maxv + '&';
		Benchmark.url	+=	'chl=0|' 	+ Benchmark.labels.join("|")	+ '&';

		var data = '';
		for(serie in Benchmark.data)
			data += "0," + Benchmark.data[serie].join(",") + "|";
		data = data.substr(0, data.lastIndexOf("|"));			

		Benchmark.url	+=	'chd=t:' 	+ data	+	'&';

		Benchmark.url	+=	'cht=' 	+ Benchmark.api.cht			+ '&';
		Benchmark.url	+=	'chdl=' + Benchmark.api.labels.join("|") + '&';
		Benchmark.url	+=	'chco=' + Benchmark.api.chco 		;
	},
	prepare :   function(p){
        jQuery('<div id="benchmark-dom'+p+'">').hide().appendTo("body");
        if(Benchmark.show)
        	jQuery('#benchmark-dom'+p).show();
	},
	serie 	:	function(p, arg){
		jQuery('#benchmark-dom'+p).append('<div id="serie-'+p + '-' + arg +' />');
	},
	append  :	function(p, arg){
        for(var x = 1;x <= p; x++){
			var a = Benchmark.options.prepare.attr("id", "test-" + p + '-' + arg + '-' + x).clone();
    		jQuery(a).appendTo('#serie-'+p+'-'+arg);
		}
	},
	clean	:	function(p, serie){
		jQuery('#serie-' + p + '-'+ serie).empty();
	},
	stop	:	function(benchmarkid, serie){

        Benchmark.finish = new Date().getTime();
		//console.log("FINITO");
		Benchmark.elapsed = Benchmark.finish - Benchmark.start;

		if(Benchmark.elapsed > Benchmark.maxv)
				    Benchmark.maxv = Benchmark.elapsed;

		//labels
		if(Benchmark.labels.indexOf(benchmarkid) == -1)
			Benchmark.labels.push(benchmarkid);

		//data
		if(!Benchmark.data[serie])
			Benchmark.data[serie] = [];

		Benchmark.data[serie].push(Benchmark.elapsed);

		Benchmark.start = Benchmark.elapsed = Benchmark.finish = false;

		if(Benchmark.options.clean)
			Benchmark.clean(benchmarkid, serie);

	},
	each	:	function(test){//test){

		if(Benchmark.impossibile)
			return;

		//console.log("inizio i benchmark");

		for(var p = 1;p <= Benchmark.maxc; p++){
			if(p % Benchmark.options.mod === 0){

				//console.log("benchmark " + p);

				if(Benchmark.options.prepare)
					Benchmark.prepare(p);

					//lavora sulle serie
					for(arg in Benchmark.options.args) {

						Benchmark.serie(p, arg);
						//console.log("inizio la serie " + arg + " di " + Benchmark.options.args[Benchmark.options.args.length -1]);

						Benchmark.append(p, arg);
						//console.log("appendo i figli " + p);

						//esegue init()
						test(p, arg);

					}
				}
		}

	},
	prefix : function(nr, serie){
        return '#benchmark-dom' + nr +' > #serie-'+ nr +'-'+ serie + '> ';
    },
	init	:	function(options, nr, serie){

		options = jQuery.extend({
			test 	: function(){}
		}, options);

		var container = jQuery(this);
		var size = container.size();

        if(nr != size)
		  alert("Error. remove class from clone");

        Benchmark.start = new Date().getTime();
		return jQuery(this, container).each(
			function(z){
				var that = this;
				for(func in options.test){
					options.test[func](that, serie);//eseguita la funzione utente
				} 

				if(z == (size -1))
					Benchmark.stop(nr, serie);//nr è più sicuro
			}
		);

	}
};	

jQuery.fn.benchmark = Benchmark.init;