Google está errado sobre adiar?
Neste post:
Por que o google está usando o termo "JavaScript de bloqueio de renderização"?
O @ jaffa-the-cake está pedindo um comentário para alguém:
"Qual documentação você considera incorreta?"
Vamos dar por exemplo esta documentação:
https://developers.google.com/speed/docs/insights/BlockingJS
E agora vamos pegar, por exemplo, o que eles estão dizendo sobre "adiar":
O carregamento e a execução de scripts que não são necessários para a renderização inicial da página podem ser adiados até que a renderização inicial ou outras partes críticas da página tenham terminado o carregamento. Fazer isso pode ajudar a reduzir a contenção de recursos e melhorar o desempenho.
Observe que o artigo é sobre "Remover JavaScript de bloqueio de renderização"; portanto, com a palavra "pode", eles significam que você PODE usar adiamento.
Com "adiar" em uma tag de script, você NÃO adiará "a execução até que a renderização inicial da página termine de carregar". Pode ser o caso, mas não necessariamente.
"Adiar" adiará a execução até depois que o html inicial estiver no DOM, mas isso é algo diferente de "renderizar". A execução ocorrerá após o html (anterior) estar no DOM e antes do DOMContentLoaded, mas isso não significa: "a renderização da página terminou de carregar". Seria correto se eles usassem o termo "a análise de html da página foi concluída".
Um exemplo que confirma a teoria acima:
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
Some HTML line and this is above the fold
<script src="script.js" defer></script>
</body>
</html>
SCRIPT.JS (do cache!)
// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 5000 );
Caso o navegador pegue o script.js do cache, "Alguma linha HTML e esta acima da dobra" serão exibidas APÓS 5 segundos! Isso significa que a renderização inicial da página ainda não terminou de carregar (enquanto estiver usando o adiamento). Então, na minha opinião, isso significa que a documentação está incorreta.
p.s. Sem o script.js do cache, um navegador terá tempo para concluir a renderização do html anterior. O arquivo script.js primeiro precisa ser baixado, e é isso que dá ao navegador um tempo extra. Com o armazenamento em cache, há menos tempo entre a "execução da análise de html" e o início da "execução de javascript"; portanto, há uma chance de que a "execução de javascript" já comece antes de "concluir a renderização do html anterior". Portanto, em caso de ganho de velocidade, você pode até considerar neste exemplo desativar o cache, para que a renderização do html anterior seja mais rápida.
Eu tenho muito mais testes / exemplos que comprovam que outras partes de outra documentação (sobre renderização) do Google estão incorretas (na minha opinião), mas vou manter claro neste post usando 1 exemplo.
Se você não concorda comigo, não dê apenas uma reputação negativa, mas, pelo menos, faça um comentário por que você acha que está incorreto e qual teste você fez para confirmá-lo. Eu já estou tentando convencer algumas pessoas no Google de que elas estão incorretas na minha opinião, mas elas ficam meio ofendidas por isso. É claro que eu não diria que eles estão incorretos se eu não dedicasse muito tempo / energia / testes e se eu tivesse certeza disso. Até agora, eles estão me dizendo: "considere que o mal-entendido pode ser seu", então eu me sinto como um menino pequeno "lutando" contra um grande muro. Para mim, não está a ponto de acertar em primeiro lugar, mas vejo tantas pessoas ao meu redor (elas já estão há muitos anos trabalhando em TI) lutando com a renderização do assunto e eu posso entender, porque a documentação sobre isso é muito confuso. Foi também por isso que mergulhei mais fundo, porque também estava ficando muito confuso para mim, então eu queria entender melhor. E se eu estiver errado, apenas me convença com argumentos e eu sou o primeiro a dizer que eu estava errado.