YouTube

Got a YouTube account?

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

Portuguese, Brazilian subtitles

← Converting CSS to the CSSOM - Website Performance Optimization

Get Embed Code
6 Languages

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

  1. [SEM ÁUDIO]
  2. Tudo bem. O DOM captura o conteúdo
    da página.
  3. Mas também precisamos saber como
    exibir a página propriamente dita.
  4. Para isso, precisamos criar um
    modelo de objeto CSS.
  5. A julgar pelo nome,
    é semelhante ao DOM?
  6. É bem parecido.
    Vamos ver.
  7. Digamos que recebemos
    este CSS.
  8. A primeira coisa que o navegador tem
    que fazer é identificar os tokens corretos.
  9. Mas não há colchetes
    angulares aqui, certo?
  10. Pois é. O CSS tem seu próprio conjunto de regras
    para identificar tokens válidos.
  11. Os detalhes não são importantes.
  12. Se estiver curioso, você pode conferir o
    link da especificação CSS
  13. nas Notas do instrutor.
    A parte importante é que o analisador
  14. converte os tokens em nós e,
    neste caso, o primeiro
  15. seria body, com sua
    propriedade font-size.
  16. Depois temos o nó de parágrafo,
    e esta é a parte importante:
  17. ele é filho de body, porque todo
    o conteúdo visível faz parte do corpo.
  18. Espere. Isso é alguma regra
    de especificação CSS?
  19. Pois é. Exatamente.
  20. Observe também que os filhos
    do nó body herdam
  21. do pai as regras de estilo
    de tamanho de fonte de 16 pixels.
  22. Isso é o que queremos dizer
    com regras em cascata e
  23. folhas de estilo em cascata.
  24. Interessante. É semelhante,
    mas não exatamente igual, à
  25. construção do DOM, pois
    as regras CSS descem em cascata.
  26. Tenho uma folha de estilo
    com muitas regras.
  27. Podemos aplicar o mesmo truque
    de processamento incremental,
  28. como fazemos com HTML,
  29. para que a página seja exibida mais rápido?
  30. É uma ótima pergunta.
  31. Infelizmente, não.
  32. Não podemos usar uma árvore CSS parcial.
  33. Veja por quê.
  34. Digamos que acabamos de receber
    os primeiros bytes do CSS
  35. e eles contêm as duas regras
    que temos aqui.
  36. Seguimos e criamos o
    modelo de objeto CSS.
  37. É tentador usar essa árvore para
  38. renderizar uma página, mas
    há um problema.
  39. Digamos que agora temos
    o próximo bloco de CSS
  40. e ele contém mais regras.
  41. Nesse caso, temos o parágrafo
    com font-weight: normal.
  42. O CSS permite redefinir
    e refinar as propriedades de estilo.
  43. Isso é perfeitamente válido.
  44. Mas observe que esta regra
  45. nos permitiria
    alterar nosso CSS na árvore
  46. e exibir o texto no nó de parágrafo
  47. com o peso normal.
  48. Ah, então é uma pegadinha.
  49. Você está dizendo que não podemos
    usar um CSS parcial na árvore,
  50. pois isso poderia nos levar a usar
    os estilos incorretos quando
  51. renderizarmos a página?
  52. Exatamente, o navegador bloqueia
    a renderização de página
  53. até receber e processar
    todo o CSS.
  54. O CSS é bloqueador de renderização.