Portuguese, Brazilian subtitles

← The Preload Scanner - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 12 created 06/20/2016 by Udacity Robot.

  1. Cameron,
    por que você não tenta desenhar
  2. o diagrama do caminho de renderização
    crítica deste exemplo?
  3. Claro. Vamos ver.
    Vamos primeiro ao mais importante.
  4. Solicitamos este HTML.
    Depois começamos a criar o
  5. DOM e chegamos a este arquivo CSS,
  6. que, é claro, precisamos solicitar.
    Continuamos a criar o DOM
  7. e encontramos
    imediatamente o app.js,
  8. que bloqueia o analisador.
    Então paramos a criação do
  9. DOM, solicitamos e
    esperamos pelo arquivo.
  10. Quando finalmente conseguimos o
    CSS e criamos o CSSOM,
  11. podemos executar o app.js e
    continuamos a criar o DOM. Aí chegamos ao próximo script,
  12. timing.js, e bloqueamos o
  13. analisador no download.
    Isso faz sentido?
  14. Sim, está certo. Mas isso
    pode demorar.
  15. Primeiro bloqueamos o app.js
    e esperamos a chegada dele.
  16. Depois, o timing.js e esperamos a chegada dele também.
    Para otimizar este caso específico,
  17. o navegador tem um processo especial
    chamado scanner de pré-carga,
  18. que se adianta no documento
    e tenta descobrir arquivos
  19. CSS e JavaScript críticos,
    como timing.js.
  20. Que esperto.
    Então, mesmo que o analisador
  21. esteja bloqueado, podemos descobrir o timing.js
  22. e iniciar o download
    de recursos críticos?
  23. Sim, isso mesmo.
    Em vez de esperar para criar o modelo de objeto
  24. CSS
    e executar o app.js antes de solicitar
  25. timing.js. o scanner de pré-carga localiza
    o timing.js e o solicita enquanto o
  26. analisador está bloqueado.
  27. Legal. Isso é bem interessante.
  28. Onde posso aprender mais
    sobre o scanner de pré-carga?
  29. Consulte as Notas do instrutor.
    Você encontra bons recursos
  30. que explicam por que
    o scanner de pré-carga existe e como ele funciona.