JavaScript  »  Articoli  »  Mondo Javascript 

DOM scripting.

Negli script che devono percorrere il documento alla ricerca degli elementi su cui scatenare un evento o svolgere una operazione, le funzionalità dei framework rendono la vita facile agli sviluppatori: non solo, il selector engine integrato (ad esempio Sizzle) permette di utilizzare i selettori CSS3 per accedere ai vari elementi della pagina, in maniera indifferente dal browser.

Attenzione però, proprio i selettori CSS vanno usati senza esagerazione: sono comodi, ma comunque più lenti di altre soluzioni, magari vecchio stile, ma efficaci. Il metodo di selezione più veloce in assoluto è invece il riferimento al nodo interessato tramite id (document.getElementById()). In altri casi, in cui è necessario accedere a molteplici nodi, può essere preferibile il riferimento per tipo di tag (getElementsByTagName()).

Comunque, volendo ottimizzare l'uso dei selettori CSS è bene fare attenzione alle regole utilizzate che non devono essere né troppo generiche (es. 'div', 'a') né troppo specifiche (es. 'div[class$="content"] div.module input:disabled').

Nel test seguente vengono applicati due script simili per rendere tutte le tabelle di una pagina a righe alternate. Mentre con i browser più moderni (leggi Firefox, Safari e Chrome) non si riscontrano differenze particolari, con Internet Explorer il codice in Javascript classico (esempio) è nettamente più veloce rispetto rispetto a quello (veramente conciso) che utilizza i metodi del framework JQuery (esempio). E anche utilizzando librerie alternative i risultati sarebbero comunque similari. Chiaramente si tratta di un esempio estremo, volutamente gravoso per l'engine del browser che deve attraversare ben 8 tabelle da 500 righe ciascuna; in casi normali la differenza temporale di esecuzione è meno evidente.

/* Classic DOM */  (veloce in IE)
var tables = document.getElementsByTagName("table");
for ( var t = 0; t < tables.length; t++ ) {
  var rows = tables[t].getElementsByTagName("tr");
  for ( var i = 1; i < rows.length; i += 2 )   
      rows[i].className += "oddrow";
}


/* Jquery */ (lento in IE)
$("table tr:nth-child(even)").addClass("oddrow");

/* Prototype */ (lento in IE)  
$$('table tr:nth-child(even)').invoke('addClassName', 'oddrow');

Anche nella manipolazione del DOM, per la creazione, inserimento o aggiornamento di contenuti nel documento, è possibile tentare diversi approcci alla ricerca della migliore performance. Eterna è la diatriba sull'utilizzo del metodo innerHTML: i puristi degli standard ci hanno sempre raccomandato di preferire le API del W3C DOM. Tuttavia, oggi il supporto ad innerHTML è ormai presente su tutti i principali browser; inoltre, il codice, oltre ad avere una forma più concisa, è anche decisamente più veloce nell'esecuzione (specialmente con i browser Microsoft). Nel seguente esempio un confronto tra i due metodi applicati per inserire dinamicamente nel documento una tabella di 50 righe:

// metodo W3C DOM (lento)
var x = document.createElement('table'); 
x.setAttribute("class","myTable"); 
var y = x.appendChild(document.createElement('tbody')); 
for (var i=0;i<50;i++) { 	
	var z = y.appendChild(document.createElement('tr')); 	
	for (var j=0;j<50;j++) { 		
		var a = z.appendChild(document.createElement('td'));
		a.appendChild(document.createTextNode('*'));
	}
}
document.getElementById('placeholder-1').appendChild(x);


// innerHTML (veloce)
var string = '<table class=\"myTable\"><tbody>';
for (var i=0;i<50;i++) {
	string += '<tr>';
	for (var j=0;j<50;j++) {
		string += '<td>*</td>';
	}
	string += '</tr>';
	}
string += '</tbody></table>';
document.getElementById('placeholder-2').innerHTML = string; 

Termina qui la seconda parte dell'articolo. Concluderemo la settimana prossima parlando del formato di dati Ajax, della gestione delle stringhe, dell'utilizzo delle variabili e della gestione dell'evento onload.

Altri articoli

Altre guide

Altre newsletter