Existem vários cenários diferentes que podem travar seu navegador - sem contar os bugs. :P
Execução demorada
A execução demorada de um script pode fazer ele ficar bloqueado, mas não necessariamente causar um travamento.
Exemplo:
for (var i = 2; i > 0; i++) {}
O código acima não faz a página travar e nem ocupa muito o processador, mas dado que a execução de JavaScript no navegador é realizada de forma síncrona, isto significa que o navegador fica impedido de realizar outras ações naquela página.
Se o navegador tiver alguma proteção contra isso, ele vai identificar que o script está demorando muito para retornar (timeout) e oferecer uma opção ao usuário para "matar" o processo daquela página ou aba. Caso contrário você terá que finalizar o navegador como um tudo.
Consumo de memória
Entretanto, o código de exemplo da pergunta não apenas fica bloqueado num laço infinito, mas também gera uma quantidade infinita de output para o console.
A não ser que você tenha desativado o console, os dados vão sendo armazenados em algum local da memória até que não haja mais espaço disponível e aí você vai ter uma falha no processo. Se o console estiver sendo exibido na Ferramenta do Desenvolvedor, isso é pior ainda pois o navegador tem que atualizar a interface com o usuário, executando diversos cálculos de posicionamento dos textos, entre outras coisas.
Navegadores podem usar diferentes técnicas para prevenir um travamento total, como é o caso do Chrome, que usa um processo por página ou aba, o que significa que se uma aba travar, basta "matar" ela e a memória consumida será recuperada sem prejuízo ao sistema e às demais páginas ou abas.
Note que esta é apenas uma das muitas formas de consumir muita memória. Por exemplo:
- Vazamentos de memória podem ser introduzidos adicionando indefinidamente valores à objetos ou listas, ou mantendo referências a elementos que nem estão na página.
- Trabalhar com strings muito grandes, fazer concatenações em laços e coisas parecidas também podem acabar com a memória.
- Usar recursividade sem um limite adequado também vai travar o script.
Evitando tais problemas
A verdade é que não existe uma forma prática e segura de evitar esse tipo de problema pois há muitas construções diferentes na linguagem que podem levar a tais situações.
Entretanto, as melhores abordagens que conheço são:
- Escrever código modular (AMD, ES6) onde as funções e variáveis são isoladas tanto quanto possível.
- Testar o seu código de forma automatizada e unitária (QUnit, Jasmine).
- Usar ferramentas de linting (ESLint), isto é, que analisam seu código estaticamente, de acordo com regras pré-estabelecidas, procurando por práticas ruins e possíveis equívocos.
- Use o paradigma funcional, quando possível
Especificamente sobre o item #3, ESLint possui uma lista de regras definidas dentre as quais existem algumas que podem detectar laços sem condições de parada, como esta. Se há algum erro frequente que não está ali, você pode escrever sua própria regra.
Por que código modular
Algo importante é que, quanto mais confuso seu código, menos efetivo são os testes e a análise estática. Por isso o item #1 da minha lista acima está nessa posição.
Por exemplo, muita gente usa variáveis de escopo global em laços. O comportamento desse tipo de código é absurdamente complexo de prever.
function f1() {
for (i = 0; i < 10; i++) f2();
}
function f2() {
for (i = 0; i < 5; i++) whatever();
}
No exemplo acima, f1
chama f2
para cada execução do laço. Porém i
não é uma variável local, então f2
vai sempre terminar com i = 5
e o laço em f1
nunca vai acabar.
Por que paradigma funcional
O BrunoRB mencionou algo muito importante acima, que é o uso de rotinas como forEach
ao invés de fazer o laço manualmente.
O paradigma de programação funcional é conhecido por evitar vários problemas inerentes do paradigma imperativo, como este caso.
A ideia é usar rotinas especiais que encapsulam a lógica de percorrer determinada estrutura de dados, afinal elas são implementadas uma vez, testadas e tem pouquíssima chance de sofrer regressões. A partir diss você pode executar ações em cada elemento da estrutura de dados usando uma função callback.
Somente é importante considerar que, embora isso ajude a não errar com o contador de um laço, isso ainda não protege totalmente contra o mau uso de variáveis globais ou que são compartilhadas com outras funções, como no exemplo acima.