Como saber qual forma de implementar um código em javascript roda mais rápido, com melhor perfomance? Ou, ainda, qual browser interpreta um código mais rápido?
Criei uma classe bem simples: instancia-se ela, chama o método start() para iniciar o cronômetro e o stop() para parar. O stop() retorna a diferença de tempo em segundos.
A implementação da classe é:
/*
classe para contador de tempo
*/
function TimeCounter() {
this.startDate = null;
this.ellapsedTime = null;
//inicia o timer
this.start = function() {
this.startDate = new Date();
}
/*
para o timer e retorna a diferença entre a hora atual e a em que foi startado/ dividindo
por mil pois a diferença é dada em milisegundos
*/
this.stop = function() {
return (new Date() – this.startDate)/1000;
}
}
Segue um uso da mesma; ao carregar a página (onload() da janela) inicio o cronômetro e crio 1000 divs, adicionando-as ao body. Após acabar o laço, paro o cronômetro. *faça o teste em diversos browsers e veja a diferença de performance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Time Counter</title>
<script type="application/javascript">
function TimeCounter() {
this.startDate = null;
this.ellapsedTime = null;
this.start = function() {
this.startDate = new Date();
}
this.stop = function() {
return (new Date() – this.startDate)/1000;
}
}
var timeCounter = new TimeCounter();
window.onload = function() {
timeCounter.start();
for(var i=0; i<1000; i++) {
var div = document.createElement("div");
div.appendChild(document.createTextNode(i));
document.body.appendChild(div);
}
alert(timeCounter.stop());
}
</script>
</head>
<body>
</body>