Crie um cronômetro em javascript

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>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *