Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Mondo Javascript

Pagine:

RSS

Ottimizzazione: Javascript e performance del sito

di: Filippo Buratti 06 Settembre 2010

Gestione delle stringhe.

Operazioni ripetitive di concatenazione di più stringhe possono influire sulla velocità di esecuzione del codice; a seconda del contesto di utilizzo, bisogna tentare diversi approcci, perché anche in questo caso il comportamento dei browser non è uniforme. Il metodo più ovvio è solitamente anche il più performante, con l'assegnazione diretta tramite i simboli +=. La tecnica che impiega un array temporaneo con i metodi push() per aggiungere e join() per unire le stringhe è molto razionale ed elegante, ma spesso non altrettanto efficiente. Una soluzione di compromesso può consistere nell utilizzare un indice per incrementare l'array senza invocare push(). Ecco l'esempio con le tre tecniche applicate.

/* concatenazione di stringhe con += */
// veloce in IE
function test1() {
	var mylongString = '';
    for (var i = 0; i < 100000; i += 1) {
    	mylongString += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    }
}

/* concatenazione di stringhe con array.push() */
// lento in IE 
function test2() {
	var temp = [];
	for (var i = 0; i < 100000; i += 1) {
		temp.push('ABCDEFGHIJKLMNOPQRSTUVWXYZ');
	}	
	var mylongString = temp.join('');
   
}

/* concatenazione di stringhe know index */
// veloce in Firefox 
function test3() {
	var temp = [];
	for (var i = 0; i < 100000; i += 1) {
		temp[i] ='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
	}	
	var mylongString = temp.join('');
}

Un cenno infine alle espressioni regolari, croce e delizia di ogni programmatore, fenomenali strumenti per la comparazione e verifica delle stringhe, ma assai dispendiose; se se ne può fare a meno, sostituendole ad esempio con i semplici metodi delle stringhe, ben venga. In ogni caso, può portare giovamento precompilare la regular expressions, assegnandone il valore in una variabile globale riutilizzabile.

Non attendere onload.

Nella maggior parte dei casi, invece di attendere l'evento onload, che è attivato solo quando è stato completato il caricamento di tutte le risorse (come le immagini, i fogli di stile inclusi, etc), i nostri script possono essere eseguiti appena l'albero del documento è stato completamente costruito. La tecnica più semplice consiste nell'includere tutto il blocco di script alla fine del documento, subito prima della chiusura del tag body, come negli esempi di codice presentati. Alternativamente ogni framework Javascript dispone ormai di un proprio gestore domReady, che rappresenta il luogo ideale per attaccare tutti i gestori di evento ed eseguire altro codice, non appena il DOM è pronto.

/* Jquery */
$(document).ready(function() {
// Code
});


/* Prototype */
document.observe('dom:loaded', function() {
// Code
});


/* MooTools */
window.addEvent('domready', function() {
// Code
});


/* Yahoo! UI libarary */
Y.on("domready", function(e){
// Code
});


/* Ext JS */
Ext.onReady(function(){
// Code
});

Solo in casi limitati è necessario affidarsi ancora al gestore onload, come per il precaricamento delle immagini o quando è necessario ottenere delle informazioni sulle dimensioni degli elementi.

Considerazioni finali.

Gli aspetti del codice che abbiamo preso in esame, pur essendo tra i più critici per le prestazioni di una applicazione web, non sono un elenco esaustivo delle problematiche di performance riscontrabili nell'uso del linguaggio Javascript. Per un approfondimento degli argomenti, non mi rimane che segnalare allora alcune guide e risorse utili: