3

Estou com uma dúvida meio estranha, gostaria da ajuda de vocês pra tentar esclarecer..

Já que o Javascript é singlethread e as chamadas assíncronas tentam contornar essa "fraqueza", o que acontece quando um processo do webkit trava ?

Pensem nesse código:

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

Se implementarmos o onload o mesmo só será chamado quando o webkit terminar de processar a imagem. Caso o webkit tenha algum while(true) (é só um exemplo) no processo de ler a imagem e carregar em memória,o código javascript iria ficar travado, fazendo com que todos as chamadas assíncronas travem também?

7
  • Timeout e Interval não são assíncronos
    – MarioAleo
    16/02/2017 às 16:35
  • Achei que fossem, enfim, editei a pergunta. 16/02/2017 às 16:39
  • A pergunta esta bem vaga, voce tem algum codigo para mostrar o que voce esta tentando perguntar?
    – MarioAleo
    16/02/2017 às 16:41
  • Eu não compreendi sua pergunta, seu código de exemplo não está de acordo com o que escreveu, pode ser mais específico por favor? 16/02/2017 às 16:41
  • Esse código de exemplo é só para exemplificar uma função que tenha algo assíncrono, como disse logo em baixo sobre implementar o onload. O que quero saber é se caso esse o processo de ler a imagem (processo em que o webkit carregar a imagem num buffer em memoria (acredito que seja assim)) trave, o que vai acontecer com as chamadas assíncronas que ainda não retornaram. Elas vão continuar executando caso não tenham dependência com esse processo do webkit ? 16/02/2017 às 16:47

1 Resposta 1

6

Sua dúvida envolve um pouco da compreensão do funcionamento do JavaScript.

Você está correto quando diz que a linguagem é single threaded (ao menos na implementação dos browsers).

Quanto às chamadas assíncronas que você menciona, peço que me acompanhe a seguir numa explicação bem resumida do que acontece por baixo dos panos em uma execução de código JavaScript. Depois de compreender esta parte, a sua pergunta será facilmente respondida.

Vamos lá.

O que ocorre é que a linguagem, no navegador, roda dentro de um contexto de execução (runtime): cada página/aba/iframe possui seu próprio ambiente isolado. E este contexto de execução envolve três aspectos: pilha (stack), fila de mensagens (queue) e memória (heap).

inserir a descrição da imagem aqui

De uma maneira bem simplista, podemos dizer que a pilha é exatamente o que está sendo processado, enquanto que a fila de mensagens é o que está esperando para ser processado.

O exemplo mais comum de uma mensagem que vai para a fila de mensagens é a ocorrência de um evento que estava sendo monitorado. Por exemplo, quando executamos um botao.addEventListener('click', function() { });, o navegador entende esta instrução como: "cada vez que alguém clicar neste botão, vou colocar esta função que você me passou na fila de mensagens."

Outro uso comum para a fila de mensagem é o retorno de uma chamada XHR . Ou ainda, a função passada como argumento do setTimeout, ou setInterval (ainda que o tempo informado seja zero, como vamos ver mais adiante).

Onde quero chegar é que um dos princípios deste fluxo é que a próxima mensagem não é colocada na pilha de execução enquanto a pilha não estiver vazia. Ou seja, em outras palavras, todas as funções em execução (uma função que chamou a outra que chamou a outra, por exemplo) devem finalizar para a próxima mensagem ser colocada nesta pilha. A mensagem só sai da fila de mensagens quando a pilha estiver completamente vazia.

Assim, ainda que o callback pudesse teoricamente ser executado imediatamente, a função tem que terminar para ele ser processado. Considere o código abaixo:

console.log("início");

setTimeout(function() {
    console.log("dentro do setTimeout()")
}, 0);

console.log("fim");

Resultado:

//início
//fim
//dentro do setTimeout()

Ainda que o setTimeout esteja com tempo zero, ele NUNCA será executado antes da função terminar, por que ele foi para a fila. Assim que a pilha terminar, a próxima mensagem será chamada (note que se a fila estiver cheia de mensagens, pode ser que demore bem mais que zero para a execução iniciar. Por isso a especificação do setTimeout fala que o tempo informado no parâmetro é o mínimo, e não o tempo garantido: pois a fila pode estar com mensagens na frente.).

Toda esta conceituação acredito que serve para responder sua dúvida. Pois, independente de onde vier o código (seja de um setTimeout, ou de um callback de uma chamada XHR etc), quando ele for para a pilha ser executado, e esta função nunca encerrar (um loop infinito, por exemplo), o runtime trava. Aquela função nunca encerrará, a pilha não será limpa, e a próxima mensagem não será invocada nunca.

A título de exemplo, observe este código:

setTimeout(function() {
    while (true) {};
}, 3000);
console.log("olá!");

O que acontece quando este código é executado:

  1. Na invocação da função setTimeout, o navegador foi instruído a, assim que passar 3 segundos, colocar aquela função anônima no final da fila de mensagens.
  2. Logo em seguida, ele imprime um "olá!".
  3. A função foi encerrada e a pilha é limpa.
  4. O event loop está checando por novas mensagens. Por enquanto, nada.
  5. Assim que se passar 3 segundos, o navegador colocou aquela função anônima na fila de mensagens.
  6. O event loop viu que teve mensagem nova e a removeu da fila e a colocou na pilha para ser executada.
  7. O while (true) {}; causou um loop infinito e travou a função. Ela nunca retornará, o navegador trava e nenhum evento mais é executado.

Dito isto, indo mais a fundo na sua dúvida, se houver algum problema na implementação do navegador para suas funções internas (por exemplo, o código faz um request XHR e o navegador se perde e nunca coloca o callback na fila - seja de erro ou sucesso -, ou tenta carregar uma imagem e ocorre um erro não tratado neste carregamento), tudo isto é considerado BUG do navegador e nada tem a ver com fluxo de execução JavaScript, pois o código nativo é normalmente C++ (o v8 da Google, pelo menos). Os resultados para o usuário variam de acordo com a natureza e a dimensão do erro: o fluxo do script pode ser interrompido se houver um crash, o navegador pode retornar um resultado não esperado, um callback nunca ser invocado etc.

4
  • Excelente resposta, obrigado! Só para concluir tendo base em pensamento meu exemplo, quando esperamos um onload da imagem, a mesma vai para a fila, certo? E fica la até ser processada, certo? Então caso o processo de carregar a imagem em memoria do navegador teja algum bug, um loop infinito e nunca retorne a callback, o mesmo não vai interferir de modo algum no funcionamento do código JS, é isso? 17/02/2017 às 11:04
  • 1
    @PauloGustavo de nada. Na verdade, quando você seta um onload ele informa ao navegador que, somente quanto a imagem carregar, ele irá colocar a mensagem callback na fila. Até lá,neste limbo (entre o onload e o callback ir pra fila de execução JS), este processamento é código nativo do navegador e se der algum bug, vai depender do erro. Se for um crash geral, não tem o que fazer, trava tudo. Se for um outro erro, pode acontecer de o callback nunca entrar na fila e o onload nunca ser invocado.
    – luiscrjr
    17/02/2017 às 11:11
  • 1
    @PauloGustavo Isto teoricamente, por que na prática os navegadores estão muito maduros para tratar esses erros e, quando ele não consegue carregar uma imagem por exemplo, seja por qual motivo, ele apenas manda um callback de erro (no seu exemplo, um onerror).
    – luiscrjr
    17/02/2017 às 11:13
  • Cara, muito obrigado mesmo. Essas dúvidas surgiram porque nos mesmo temos uma implementação com várias modificações no qtwebkit. E por causa disso, surgiu uma necessidade de ter que otimizar o processo como o canvas e imagens trabalham, e por algumas modificações já feitas pela equipe, o código javascript começou a se comportar de maneira estranha em chamadas assincronas. Sua resposta vai ser muito útil para continuar. Obrigado! 17/02/2017 às 11:38

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 .