Por que um navegador nem sempre está finalizando a renderização do HTML anterior, antes de executar o JavaScript?

Question

Oct 25, 2017, 01:18 PM

html performance rendering javascript browser

Por que um navegador nem sempre está finalizando a renderização do HTML anterior, antes de executar o JavaScript?

A pergunta é sobre o seguinte código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
</head>
<body>
    One line of HTML code
    <script>
        // Synchronous delay of 5 seconds
        var timeWhile = new Date().getTime();
        while( new Date().getTime() - timeWhile < 5000 );
    </script>
</body>

Eu testei no Firefox e Chrome e eles estão mostrando (renderização): "Uma linha de código HTML" após 5 segundos e não dentro de 5 segundos. Por que um navegador está fazendo isso?

Entendo por que um navegador precisa parar de renderizar ao executar JavaScript, porque você pode alterar o estilo dos elementos com JavaScript (como exemplo). Daria problemas se o navegador tivesse que mostrar e alterar o conteúdo exatamente no mesmo momento. É por isso que um navegador está bloqueando a renderização enquanto executa o JavaScript.

No exemplo acima, ao iniciar a execução do JavaScript, "Uma linha de código HTML" já é analisada pelo "Analisador de HTML". É necessário, porque o JavaScript pode conter, por exemplo, document.write, portanto, a cadeia anexada deve vir após o HTML anterior. Aparentemente, existe algum tempo entre "analisar o HTML" e mostrar / renderizar o mesmo HTML, porque, caso contrário, o navegador neste exemplo já mostraria algo dentro de 5 segundos, mas esse não é o caso.

Quando você substitui "Uma linha de código HTML" por muito código HTML, o navegador já mostra algum conteúdo dentro de 5 segundos; portanto, em princípio, é possível mostrar já algum conteúdo.

Se eu fosse um navegador, faria:

Analisar "Uma linha de código html"Vendo algum bloco de JavaScriptConclua a renderização do HTML, precedendo o "bloco JavaScript", para que o navegador apareça neste momento: "Uma linha de código HTML"Agora faça uma pausa na renderização e execute o código JavaScript.Após executar o código JavaScript, comece a renderizar novamente.

Em um exemplo como este, o navegador pode mostrar algum conteúdo 5 segundos antes. Esse é um grande ganho de velocidade em termos de renderização.

Talvez seja algo que os navegadores possam melhorar, mas talvez haja outro motivo. Talvez alguém saiba mais sobre isso e possa me explicar isso.

leaveComments