amdplanet.it

Per i benchamark ci siamo affidati a un comodo tool reperibile facilmente online a questa pagina.

I test mettono alla prova i vari browser nel tempo di compilazione di vari formati e in ogni benchmark è sempre il browser norvegese a uscirne vincitore. 

Il DOM è lo standard ufficiale del W3C per la rappresentazione di documenti strutturati in maniera da essere neutrali sia per la lingua che per la piattaforma.

Oggetto di questi benchmark è la creazione di una tabella di 50 righe per 50 colonne, in cui tutte le celle contengono un solo carattere: *.

W3CDOM 1: Create all elements as needed

function w3cdom1()
{
removeTable();
var time1 = new Date().getTime();
var x = document.createElement('table');
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('writeroot').appendChild(x);
var time2 = new Date().getTime();
doTiming(1,time1,time2);
}

In questo caso questo la funzione W3CDOM 1 crea l'intera tabella, ma solo alla fine essa viene aggiunta alla pagina.
Infatti viene realizzata la tabella nella variabile x ed in y viene piazzato il suo corpo.
Poi con un ciclo for viene creata una riga, alla quale con un altro for vengono aggiunte le colonne contenenti un textnode con il carattere *.
Alla fine viene aggiunto la tabella in x al DOM della pagina.

W3CDOM 2: Create elements once, then clone

function w3cdom2()
{
removeTable();
var time1 = new Date().getTime();
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
var tr = document.createElement('tr');
var td = document.createElement('td');
var ast = document.createTextNode('*');
for (var i=0;i<50;i++)
{
var z = y.appendChild(tr.cloneNode(true));
for (var j=0;j<50;j++)
{
var a = z.appendChild(td.cloneNode(true));
a.appendChild(ast.cloneNode(true));
}
}
document.getElementById('writeroot').appendChild(x);
var time2 = new Date().getTime();
doTiming(2,time1,time2);
}

In questo caso invece viene creata la tabella e solo successivamente il suo corpo, in modo analogo al precedente, ma piuttosto che creare ogni volta gli elementi (righe, colonne, e i textnode), essi vengono creati solo una volta e poi clonati. Alla fine la tabella viene aggiunta al DOM. 

function inner1()
{
removeTable();
var time1 = new Date().getTime();
var string = 'for (var i=0;i<50;i++)= '< table>< tbody>';
for (var i=0;i<50;i++)
{
string += '';
for (var j=0;j<50;j++)
{
string += '*';
}
string += '';
}
string += '';
document.getElementById('writeroot').innerHTML = string;
var time2 = new Date().getTime();
doTiming(4,time1,time2);
}

In questo test invece non vengono più utilizzati i metodi del DOM, ma semplicemente viene creata una stringa, alla quale vengono aggiungi "pezzi" per andare a creare l'intera tabella, ovviamente ci sono sempre due clicli for annidati, uno per le righe e uno per le colonne. Alla fine il tutto viene aggiunto al DOM.

INNERHTML 2: push and join

function inner2()
{
removeTable();
var time1 = new Date().getTime();
var string = new Array();
string.push('< table>< tbody>');
for (var i=0;i<50;i++)
{
string.push('');
for (var j=0;j<50;j++)
{
string.push('*');
}
string.push('');
}
string.push('');
var writestring = string.join('');
document.getElementById('writeroot').innerHTML = writestring;
var time2 = new Date().getTime();
doTiming(5,time1,time2);
}

Il procedimento è simile a quello appena descritto, ma si differenzia nella sostanza, infatti piuttosto di concatenare una stringa alla buona, si utilizzano i metodi push per costruire un array di stringhe e poi viene invocato il metodo join che riunisce tutto in una stringa. 

function tableMethods()
{
removeTable();
var time1 = new Date().getTime();
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
for (var i=0;i<50;i++)
{
var z = y.insertRow(0);
for (var j=0;j<50;j++)
{
var a = z.insertCell(0).appendChild(document.createTextNode('*'));
}
}
document.getElementById('writeroot').appendChild(x);
var time2 = new Date().getTime();
doTiming(3,time1,time2);
}

In questo test invece la tabella viene creata sfruttando i metodi table , appositamente standardizzati dal W3C per creare le tabelle.

Dai nostri test risulta che Opera è nettamente il miglior programma del lotto a livello prestazionale anche se Firefox su molti test lo insidia da vicino.

Come si evince dai grafici, usando i due motori di rendering del browser di AOL otteniamo valori vicini a Internet Explorer o a Firefox.

Da sottolineare che molti valori di Explorer sono a dir poco imbarazzanti, il software di casa Microsoft viene letteralmente ridicolizzato dagli altri programmi nella velocità di rendering.