YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Portuguese, Brazilian subtitles

← Analyzing the Entire CRP in DevTools - Website Performance Optimization

Get Embed Code
6 Languages

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

  1. Certo, já vimos todos
    os componentes individuais
  2. do caminho de renderização crítica.
  3. Agora vamos examinar
    a linha do tempo
  4. sob uma perspectiva
    completa.
  5. Ótimo, é exatamente
    o que eu preciso.
  6. Para poder gerenciar as coisas, vamos usar
    nossa página "Hello world",
  7. que tem alguns estilos de CSS inline,
    um texto e uma imagem.
  8. Vamos atualizar
    para capturar o rastreamento completo.
  9. Vejamos
    o que está acontecendo aqui.
  10. Como era de se esperar,
  11. primeiro vemos a saída da requisição
    para o documento HTML.
  12. Depois há um evento
    mostrando que o servidor
  13. retornou alguns cabeçalhos de resposta,
    seguido por alguns dados.
  14. Esse é nosso HTML.
  15. A seguir, o navegador
    começa a analisar o HTML.
  16. É aqui que o navegador
    está convertendo os bytes recebidos
  17. na árvore do DOM. De fato,
    expandindo este nó,
  18. vemos
    que o analisador de documento
  19. encontra a referência de imagem incorporada
    e inicia a requisição.
  20. Feito isso, ele continua
    a analisar o HTML e,
  21. quando chega ao final,
    ele constrói o modelo de objeto CSS.
  22. Neste exemplo, nosso CSS foi declarado inline
    diretamente na página.
  23. Por isso, não há requisições CSS.
  24. Depois, o navegador constrói
    a árvore de renderização
  25. e computa todos os estilos
    do conteúdo
  26. que deve ficar visível
    na tela.
  27. É o que indica este evento
    Recalculate Style.
  28. Feito isso,,
    continuamos para o layout,
  29. que, como você agora sabe,
    é onde computamos o local e o
  30. tamanho dos elementos
    da árvore de renderização.
  31. Finalmente,
    terminado isso, emitimos um evento
  32. Paint, e nossa página
    é renderizada na tela.
  33. Sabe, quando começamos
    a olhar isso tudo,
  34. pareceu realmente confuso.
  35. Mas na verdade
    é bem simples.
  36. É muito legal.
  37. Bom saber.