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 |
|
|
|
|
|
|