Como você executa o teste do código JavaScript?

Ciclos da CPU, uso de memória, tempo de execução, etc.?

Adicionado: Existe uma maneira quantitativa de testar o desempenho em JavaScript, além da percepção de quão rápido o código é executado?

Definitivamente, os criadores de perfil são uma boa maneira de obter números, mas, na minha experiência, o desempenho percebido é o que importa para o usuário / cliente. Por exemplo, tivemos um projeto com um acordeão Ext que se expandiu para mostrar alguns dados e algumas grades Ext aninhadas. Na verdade, tudo estava renderizando muito rápido, nenhuma operação demorou muito tempo, havia muita informação sendo renderizada de uma só vez, por isso pareceu lento para o usuário.

Nós 'consertamos' isso, não alternando para um componente mais rápido ou otimizando algum método, mas renderizando os dados primeiro e renderizando as grades com um setTimeout. Assim, as informações apareceram primeiro e, em seguida, as grades apareceriam no local um segundo depois. No geral, levou um pouco mais de tempo de processamento para fazê-lo dessa maneira, mas para o usuário, o desempenho percebido foi aprimorado.

Estes dias, o profiler Chrome e outras ferramentas são universalmente disponível e fácil de usar, assim como console.time(), console.profile(), e performance.now(). O Chrome também oferece uma visualização da linha do tempo, que pode mostrar o que está matando sua taxa de quadros, onde o usuário pode estar esperando etc.

Encontrar documentação para todas essas ferramentas é realmente fácil, você não precisa de uma resposta SO para isso. Sete anos depois, continuarei repetindo o conselho da minha resposta original e lembrando que você pode executar o código lento para sempre, onde o usuário não notará, e o código muito rápido, onde o faz, e eles reclamarão da código bastante rápido, não sendo rápido o suficiente. Ou que sua solicitação para a API do servidor levou 220ms. Ou algo mais assim. A questão é que, se você selecionar um criador de perfil e procurar trabalho, você o encontrará, mas pode não ser o trabalho que seus usuários precisam.

Concordo que o desempenho percebido é realmente tudo o que importa. Mas às vezes eu só quero descobrir qual método de fazer algo é mais rápido. Às vezes, a diferença é enorme e vale a pena conhecer.

Você pode apenas usar temporizadores javascript. Mas eu normalmente obter resultados muito mais consistentes usando o Chrome nativo (agora também no Firefox e Safari) métodos DevTool console.time()&console.timeEnd()

Exemplo de como eu o uso:

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    functionOne();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    functionTwo();
};
console.timeEnd('Function #2')

Atualização (04/04/2016):

O canário do Chrome adicionou recentemente o perfil de nível de linha na guia de fontes das ferramentas de desenvolvimento, que permite ver exatamente quanto tempo cada linha levou para executar!

Sempre podemos medir o tempo gasto por qualquer função por um simples objeto de data .

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;

Tente jsPerf . É uma ferramenta on-line de desempenho em javascript para comparar e comparar trechos de código. Eu uso isso o tempo todo.

A maioria dos navegadores agora está implementando o tempo de alta resolução performance.now(). É superior ao new Date()teste de desempenho, pois opera independentemente do relógio do sistema.

Uso

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Referências

• https://developer.mozilla.org/en-US/docs/Web/API/Performance.now ()
• http://www.w3.org/TR/hr-time/#dom-performance-now

JSLitmus é uma ferramenta leve para criar testes de benchmark ad-hoc JavaScript

Vamos examinar o desempenho entre function expressione function constructor:

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

O que eu fiz acima é criar uma function expressione function constructorexecutar a mesma operação. O resultado é o seguinte:

Resultado de desempenho do FireFox

Resultado de desempenho do IE

Algumas pessoas estão sugerindo plug-ins e / ou navegadores específicos. Eu não faria, porque eles são apenas realmente úteis para essa plataforma; uma execução de teste no Firefox não será convertida com precisão para o IE7. Considerando que 99.999999% dos sites têm mais de um navegador para visitá-los, é necessário verificar o desempenho em todas as plataformas populares.

Minha sugestão seria manter isso no JS. Crie uma página de benchmarking com todos os seus testes de JS ativados e cronometre a execução. Você pode até fazer com que o AJAX publique os resultados de volta para mantê-lo totalmente automatizado.

Em seguida, basta enxaguar e repetir em diferentes plataformas.

Eu tenho uma pequena ferramenta na qual posso executar rapidamente pequenos casos de teste no navegador e obter os resultados imediatamente:

Teste de velocidade do JavaScript

Você pode brincar com o código e descobrir qual técnica é melhor no navegador testado.

Acho que o desempenho do JavaScript (tempo) é suficiente. Encontrei um artigo muito útil sobre o teste de desempenho do JavaScript aqui .

Aqui está uma função simples que exibe o tempo de execução de uma função passada em:

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}

Você pode usar isso: http://getfirebug.com/js.html . Possui um criador de perfil para JavaScript.

Resposta rápida

No jQuery (mais especificamente no Sizzle), usamos isso (checkout master e open speed / index.html no seu navegador), que por sua vez usa o benchmark.js . Isso é usado para testar o desempenho da biblioteca.

Resposta longa

Se o leitor não souber a diferença entre benchmark, carga de trabalho e criadores de perfil, leia primeiro alguns fundamentos de teste de desempenho na seção "readme 1st" do spec.org . Isso é para testes do sistema, mas o entendimento dessas bases ajudará também o JS a realizar testes. Alguns destaques:

O que é uma referência?

Uma referência é "um padrão de medida ou avaliação" (Webster's II Dictionary). Uma referência de computador geralmente é um programa de computador que executa um conjunto estritamente definido de operações - uma carga de trabalho - e retorna algum tipo de resultado - uma métrica - descrevendo o desempenho do computador testado. As métricas de referência de computador geralmente medem a velocidade: qual a velocidade da carga de trabalho concluída; ou taxa de transferência: quantas unidades de carga de trabalho por unidade de tempo foram concluídas. A execução da mesma referência de computador em vários computadores permite fazer uma comparação.

Devo comparar meu próprio aplicativo?

Idealmente, o melhor teste de comparação para sistemas seria seu próprio aplicativo com sua própria carga de trabalho. Infelizmente, muitas vezes é impraticável obter uma ampla base de medições confiáveis, repetíveis e comparáveis ​​para diferentes sistemas, usando seu próprio aplicativo e sua própria carga de trabalho. Os problemas podem incluir a geração de um bom caso de teste, preocupações de confidencialidade, dificuldade em garantir condições comparáveis, tempo, dinheiro ou outras restrições.

Se não for meu próprio aplicativo, então o que?

Você pode considerar o uso de benchmarks padronizados como ponto de referência. Idealmente, um benchmark padronizado será portátil e pode já ter sido executado nas plataformas nas quais você está interessado. No entanto, antes de considerar os resultados, você precisa ter certeza de que entende a correlação entre suas necessidades de aplicativos / computação e quais referência está medindo. Os benchmarks são semelhantes aos tipos de aplicativos que você executa? As cargas de trabalho têm características semelhantes? Com base nas suas respostas a essas perguntas, você pode começar a ver como a referência pode aproximar sua realidade.

Nota: Uma referência padronizada pode servir como ponto de referência. No entanto, quando você está selecionando um fornecedor ou produto, o SPEC não afirma que nenhum benchmark padronizado possa substituir o benchmarking de seu próprio aplicativo real.

JS de teste de desempenho

Idealmente, o melhor teste de desempenho seria usar seu próprio aplicativo com sua própria carga de trabalho alternando o que você precisa testar: diferentes bibliotecas, máquinas etc.

Se isso não for possível (e geralmente não é). O primeiro passo importante: defina sua carga de trabalho. Deve refletir a carga de trabalho do seu aplicativo. Em essa conversa , Vyacheslav Egorov fala sobre as cargas de trabalho de merda que você deve evitar.

Em seguida, você pode usar ferramentas como o benchmark.js para ajudá-lo a coletar métricas, geralmente velocidade ou taxa de transferência. No Sizzle, estamos interessados ​​em comparar como correções ou alterações afetam o desempenho sistêmico da biblioteca.

Se algo estiver realmente ruim, seu próximo passo é procurar gargalos.

Como encontro gargalos? Profilers

Qual é a melhor maneira de analisar a execução de javascript?

Acho que o tempo de execução é a melhor medida.

Você pode usar o console.profile no firebug

Normalmente, apenas testo o desempenho do javascript, quanto tempo o script é executado. O jQuery Lover forneceu um bom link de artigo para testar o desempenho do código javascript , mas o artigo mostra apenas como testar por quanto tempo seu código javascript é executado. Eu também recomendaria a leitura do artigo chamado "5 dicas para melhorar seu código jQuery ao trabalhar com grandes conjuntos de dados".

Aqui está uma aula reutilizável para desempenho de tempo. Exemplo está incluído no código:

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output

O UX Profiler aborda esse problema da perspectiva do usuário. Ele agrupa todos os eventos do navegador, atividades de rede, etc. causados ​​por alguma ação do usuário (clique) e leva em consideração todos os aspectos, como latência, tempos limites, etc.

Eu estava procurando algo semelhante, mas encontrei isso.

https://jsbench.me/

Ele permite uma comparação lado a lado e você também pode compartilhar os resultados.

A regra de ouro é NÃO bloquear, em nenhuma circunstância, o navegador do usuário. Depois disso, normalmente observo o tempo de execução, seguido pelo uso de memória (a menos que você esteja fazendo algo louco, nesse caso, pode ser uma prioridade mais alta).

Nos últimos tempos, os testes de desempenho tornaram-se um chavão, mas isso não significa que os testes de desempenho não sejam um processo importante no controle de qualidade ou mesmo após o envio do produto. E enquanto desenvolvo o aplicativo, uso muitas ferramentas diferentes, algumas delas mencionadas acima, como o chrome Profiler , costumo olhar para um SaaS ou algo de código aberto que eu possa seguir em frente e esquecê-lo até receber esse alerta dizendo que algo deu errado .

Existem muitas ferramentas impressionantes que ajudarão você a ficar de olho no desempenho sem precisar passar por obstáculos apenas para obter alguns alertas básicos configurados. Aqui estão alguns que eu acho que valem a pena conferir por si mesmo.

1. Sematext.com
2. Datadog.com
3. Uptime.com
4. Smartbear.com
5. Solarwinds.com

Para tentar pintar uma imagem mais clara, aqui está um pequeno tutorial sobre como configurar o monitoramento para um aplicativo de reação.

Essa é uma boa maneira de coletar informações de desempenho para a operação específica.

start = new Date().getTime(); 
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);