Portuguese, Brazilian subtitles

← The Render Tree - Website Performance Optimization

Get Embed Code
6 Languages

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

  1. Certo. Então, o DOM tem todo
    o conteúdo da página.
  2. O CSSOM contém todos
    os estilos da página.
  3. Como pegamos o conteúdo e os estilos e
    os transformamos em pixels na tela?
  4. Acho que está faltando uma
    etapa intermediária.
  5. Sua intuição está boa.
    Agora precisamos combinar as árvores do DOM
  6. e do CSSOM
    na árvore de renderização, que captura
  7. exatamente o que você descreveu.
    Uma das propriedades mais importantes da
  8. árvore de renderização é
    que ela só captura o conteúdo visível.
  9. Para vê-la em ação,
    vamos examinar o exemplo simples que
  10. temos aqui.
    Na parte superior,
  11. temos a árvore do
    DOM e, na parte inferior, o modelo de objeto CSSOM.
  12. Para construir a árvore de renderização,
    começamos na raiz da árvore do DOM,
  13. que, neste caso, é o
    nó de parágrafo,
  14. e verificamos se há alguma regra
  15. CSS, correspondente.
    Neste caso, observamos que temos uma regra
  16. correspondente que renderiza
    todo o texto com uma
  17. fonte de 16 pixels em negrito.
  18. Copiamos o nó de parágrafo
    para a árvore de renderização
  19. junto com suas propriedades CSS.
  20. Terminamos com o nó de parágrafo.
    Vamos percorrer a árvore.
  21. Depois, temos, 'hello',
    que é apenas um nó de texto,
  22. por isso o copiamos
    na árvore de renderização.
  23. Chegamos ao nó span.
    Temos uma regra CSS para ele.
  24. Temos um span e ele é mesmo
    filho do nó de parágrafo.
  25. Mas note que, segundo uma
    propriedade desta regra, ele está
  26. marcado como display none,
    ou seja, o conteúdo de span não
  27. deve ser renderizado.
    E, como dissemos que a árvore de
  28. renderização só captura conteúdo visível,
    podemos pular este item e seus filhos.
  29. Pulamos os filhos porque display: none afeta
    a sequência dos elementos, certo?
  30. Exatamente. Por isso, podemos pular
  31. todos os nós filhos do
    nó span e ir para
  32. o próximo nó, que
    é apenas outro nó de texto.
  33. E o copiamos para a
    árvore de renderização.
  34. Então, a árvore de renderização
    captura o conteúdo e os estilos.
  35. Certo. Vamos ver nossa página
    Hello World. OK.
  36. Aqui temos as árvores do DOM e
    do CSS da página Hello World.
  37. Para criar uma árvore de renderização,
    começamos no nó HTML na árvore do DOM.
  38. O HTML e as seções head
    não contêm informações visíveis,
  39. portanto, podemos podá-las
    rapidamente da árvore de renderização.
  40. Em seguida, temos o nó body.
    Vamos copiá-lo.
  41. Esta parte à esquerda da
    árvore deve ser familiar.
  42. É o que acabamos de construir.
    Então, vamos copiá-la também.
  43. Por fim, temos o nó
    div e o de imagem.
  44. Ambos têm conteúdo visível,
    por isso também os copiamos,
  45. e seus estilos,
    para a árvore de renderização.
  46. Feito isso, compare
    esta árvore de renderização ao
  47. que temos na tela.
  48. Hum. É, a árvore de renderização
    é uma representação muito boa.
  49. O texto desnecessário se foi.
    Posso ver que deve haver uma imagem
  50. na tela e ela deve ser
    exibida à direita.
  51. Então terminamos?
  52. Ainda não.
    Ainda temos que fazer o layout.
  53. Mas primeiro, um teste rápido.