Adicionar a Meu favorito

Wednesday, 14 de June de 2006

Vamos ver nesta dica como se comportam os laços Javascript quando a tarefa é iterar entre os campos de um formulário HTML.

Vamos construir uma página com um formulário repleto de campos input type=checkbox e medir o desempenho dos 3 laços for, while e do ... while.

O mais interesante é que os laços são mais eficientes quando se itera os elementos do último ao primeiro, ao invés de iterá-los do primeiro até o último, como é o mais comum.

O formulário:

Nosso formulário para o teste é formado apenas por um enorme número de elementos input type=checkbox. Devido ao grande número, a geração dos inputs é dinâmica: são escritos 2.000 checkboxes na tela através do laço Javascript:

Há também um botão de ação, que irá disparar os testes ao ser pressionado.

Abaixo do formulário é exibida uma tabela, inicialmente, vazia, onde os resultados serão exibidos.


Por fim, na parte superior do arquivos, estão as funções Javascript que irão testar os laços e, ao final, exibir na tabela inferior os tempos encontrados.


Conclusões:

A conclusão é interessante: o laço for é o mais lento. E, ainda por cima, iterar os campos do primeiro ao último elemento apresenta o menor desempenho.

Os laços while e do ... while apresentam sempre a maior performance, sendo que, a diferença em desempenho quando se itera os elementos do último ao primeiro é significativa.

Além disso, experimente testar a página no navegador Firefox... A diferença em desempenho em relação ao Internet Explorer é absurda...

O código completo:

Abaixo, segue o código completo. Cole o código abaixo em um arquivo .html e teste em seu navegador.

Desempenho de loops Javascript:

---

Atenção:

O teste pode demorar alguns segundos. Para uma melhlor medição, ao pressionar o botão 'testar', não faça mais nada no seu computador, apenas aguarde o fim dos testes.

Resultados:

for 0..n	for n..0	do while 0..n	do while n..0	while 0..n	while n..0

Outros artigos

Assine o Feed desta categoria

• Validação de Formulário em Javascript - 05/02/2006
• Procura de palavras na página - 23/01/2006
• Abrir Janela PopUp ao clicar no Link - 11/01/2006
• Botões de navegação com Javascript - 25/08/2005
• Ver mais...

Comentários do artigo [Novo comentário]