Klaus Paiva

Quantas vezes você já fez aquele Javascript e, quando testou numa máquina com um processador rápido ele ficou suave e vistoso, já numa máquina com baixo processamento... melhor nem lembrar, certo? =)

Eu mesmo já me deparei várias vezes com esse impasse. Porém, na terça-feira, ao usar alguns efeitos da (excelente) jQuery, eu resolvi que iria, de alguma forma, usar os efeitos somente quando o resultado fosse agradável visualmente.

O benchmark usado

Os detalhes, prós e contras do método estão listados mais abaixo. Inicialmente vou apenas demonstrar qual foi a idéia que implementei.

Minha idéia partiu de uma premissa simples: "Vou fazer um laço de n iterações e contar quando tempo este laço vai levar. Por esse tempo eu consigo presumir, mesmo que sem grande precisão, qual o poder de processamento da máquina.".

Calma! Sim, sim... a idéia de contar a duração deste laço é afetada por uma série de fatores extras, além da velocidade do processador. Mas como eu já disse, vou tratar disso logo mais.

Veja o código final que usei: (adaptado para exemplo)

var x = new Date();
i = 0;
while( i < 50000 )
{
i++;
}
var y = new Date();
if( ( y - x ) < 70 )
{
set_cookie( "has-effects", "yes" );
}
else
{
set_cookie( "has-effects", "none" );
}

Como você pode notar, o código é ridiculamente simples. Usei 50000 iterações numa página completa, não numa página de testes com apenas o código dentro e obtive resultados como (tempo em milissegundos):

• Pentium 4 2.8, 1GB de RAM - Xubuntu e Firefox 2.0.0.3: 40 (esse é meu Firefox de trabalho, cheio de tabs e extensions...)
• Pentium 4 2.8, 1GB de RAM - Xubuntu e IE6: 25
• Pentium III 551, 384MB de RAM - Windows XP e Firefox 2.0.0.3: 140
• Pentium III 551, 384MB de RAM - Windows XP e IE7: 100
• Pentium III 551, 384MB de RAM - Windows XP e IE6 (standalone): 90
• Mac PowerPC 1.25, 512MB de RAM - Mac OS X e Safari 2.0.4: 100
• Mac PowerPC 1.25, 512MB de RAM - Mac OS X e Firefox 2.0.0.3: 100

Se você olhar meu código anterior, eu defino como aptas a executarem os efeitos apenas máquinas cujo resultado foi inferior a 70. Na sequência, gravo um cookie para não repetir o teste a cada página visitada, apenas uma vez por sessão.

O código completo, inclusive com o devido controle por cookies, ficou:

var has_effects = false;
if( document.cookie.indexOf( "has-effects" ) != -1 )
{
if( document.cookie.indexOf( "has-effects=yes" ) != -1 )
{
has_effects = true;
}
}
else
{
var x = new Date();
i = 0;
while( i < 50000 )
{
i++;
}
var y = new Date();
if( ( y - x ) < 70 )
{
set_cookie( "has-effects", "yes" );
has_effects = true;
}
else
{
set_cookie( "has-effects", "none" );
}
}

Se você reparar, eu crio uma variável global has_effects para usar posteriormente em meu código.

Detalhes

Como eu já havia dito acima, obviamente este teste não mede com precisão o real poder de processamento de uma máquina. Existem uma série de fatores que influeciam, tanto positivamente como negativamente, no resultado da duração do laço.

Uma máquina completamente ociosa ou com vários processos rodando em background são exemplos destes dois casos, respectivamente.

Prós

Efeitos de animação são legais, mas só são realmente legais quando eles funcionam adequadamente. Com essa simples detecção você pode esconder um elemento qualquer da página, com um efeito de fade-out num computador supostamente rápido ou, escondendê-lo de uma vez só no caso de uma máquina com processamento lento.

Contras

O ponto contra deste benchmark é que ele leva em conta a velocidade de processamento em apenas um dado momento. Isto significa que se no momento da abertura da página seu processador estava bastante ocupado, o código irá assumir que seu processador não tem poder suficiente para fazer animações dali então. O que pode ser verdade, ou não. =)

Mais testes e sugestões

Se você tem sugestões ou usou o código em algum cenário diferente dos listados acima, deixe seu comentário! Um bom benchmark é também um conjunto de bons testes!

Referências

jQuery

O que é benchmark?