11

Estava fazendo um exercício sobre laço de repetição for em Javascript no codecademy, porem, no exercício me deparei com o seguinte aviso:

codecadeny

Tenha muito cuidado com sua sintaxe — se você escrever um laço que não possa finalizar corretamente, ele é chamado de laço infinito e irá travar seu navegador!

E lá fui eu testar:

for (var i = 2; i > 0; i++) {
	console.log(i);
}

A responsabilidade de executar o código acima é sua, ele serve apenas como exemplo.

E advinha o que aconteceu? Imagem ilustrativa

Isso mesmo travou tudo :D

Entretanto, esta situação me deixou com algumas duvidas que são:

  1. Como o navegador lida com o laço infinito?
  2. Porque o travamento ocorre?
  3. No ambiente de desenvolvimento WEB existe alguma forma ou ferramenta que minimize os efeitos causados pelo laço infinito?
5
  • Se tiver alguma sugestão de melhoria pode deixar um comentário.
    – gato
    Commented 5/05/2016 às 0:18
  • 5
    Acho que ele lida quebrando a aba infratora :D Como ele detecta eu não sei, se é que faz. Em geral os navegadores possuem uma ferramenta que permite dar pause*/colocar um *breakpoint na execução, afinal o JS roda em um VM, com bastante controle se estiver em modo de desenvolvedor.
    – Maniero
    Commented 5/05/2016 às 0:27
  • Estou aprendendo programação WEB e este efeito é mais devastador do que em Desktop kkkk, eu acho que ele nem detecta, talvez alguma IDE alerte sobre isso, mais eu não sei.
    – gato
    Commented 5/05/2016 às 0:32
  • talvez seja de interesse : Como liberar thread congelado/travado? Commented 5/05/2016 às 0:48
  • 3
    Aqui eu não deixei muito tempo, mas apesar de a página ficar travadona, foi só fechar no X da aba que tudo bem. O legal é que o Opera 12 lida melhor com isso (testei agorinha pra ter certeza) do que a versão atual, que usa o mesmo engine do Chrome. A atual trava. No 12 fica um pouco lento o browser, mas tudo funciona. Inclusive dou scroll na página com loop rodando, abro console, etc, o que indica basicamente isso como resposta: só depende da implementação de cada browser.
    – Largato
    Commented 5/05/2016 às 0:50

3 Respostas 3

13

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:

  1. Escrever código modular (AMD, ES6) onde as funções e variáveis são isoladas tanto quanto possível.
  2. Testar o seu código de forma automatizada e unitária (QUnit, Jasmine).
  3. 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.
  4. 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.

6

Como 1 e 2 já foram bem respondidas nos comentários da questão e na resposta do Sergio vou apenas dar um adicional sobre a 3: é interessante você entender como detectar um loop infinito é um problema intratável chamado de Halting Problem, tanto para o browser quanto para alguma ferramenta de análise estática de código é impossível detectar laços infinitos (exceto em casos como while(true);, o que não é lá muito útil), o melhor que o browser consegue é verificar que seu código está executando a tempo demais sem pausa o que indica que tem algo errado, e aí ele pode tomar uma decisão sobre o que fazer, porém isso vai variar conforme o que quem implementou acha que é o melhor.

Sobres formas de evitar laços infinitos existem certas práticas de código que impossibilitam a ocorrência destes, um exemplo é que se ao invés de utilizar um for(;;) tradicional você sempre iterar sobre arrays com forEach ou for...in, ou em objetos com for...in (forEach só funciona em arrays), fica impossível iterar infinitamente. Para os casos em que você não quer iterar sobre um objeto ou array, mas sim rodar certo trecho "N" vezes uma opção é criar um array com o tamanho igual ao número de iterações que você quer fazer e utilizar ele em conjunto com um foreach, exemplo:

// obs, fill só existe em chrome >=45 e firefox >=31
new Array(10).fill().forEach(function() {
   console.log('olá');
});

É meio exótico, principalmente porque javascript não possui uma maneira limpa de criar um array de tamanho X, a performance também vai sofrer (embora você precise criar uma quantidade realmente grande de laços de tamanho razoável para isso ser relevante), mas é uma técnica bacana para se conhecer (até porque que ela é a maneira padrão de se iterar em python e ruby e é tão limpa quanto um for padrão em php).

5

Como o navegador lida com o laço infinito?

Ele crasha. Acredita que o desenvolvedor sabe o que está a fazer e corre o código cegamente, bloqueando.

Porque o travamento ocorre?

Porque usa a capacidade máxima de execução. O exemplo que tens na pergunta não dá espaço ao browser para respirar, ele vai tentar correr isso tão rápido quanto possivel, infinitas vezes. E como o processamento em JavaScript é single threaded ele só corre esse processo e o resto do código fica à espera que o loop acabe. Isso nunca acontece.

No ambiente de desenvolvimento WEB existe alguma forma ou ferramenta que minimize os efeitos causados pelo laço infinito?

A única maneira é ter verificadores dentro do código que "procurem" por coisas irregulares. Algo assim:

for (var i = 2; i > 0; i++) {
    console.log(i);
    if (i > 100000) break;
}

Essa linha if (i > 100000) break; vai interromper o loop caso ele chegue à iteração cem mil.

1
  • um adendo, em computadores lentos ou OS que necessitam de uma formatação, esse tipo de ocorrência pode ocasionar o congelamento do navegador e manter o sistema ocupado por longos períodos de tempo Commented 5/05/2016 às 13:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .