YouTube

Got a YouTube account?

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

Portuguese, Brazilian subtitles

← Converting HTML to the DOM - Website Performance Optimization

Get Embed Code
6 Languages

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

  1. Quando você solicita uma URL
    e pressiona Enter,
  2. o navegador envia uma requisição
    ao servidor.
  3. Por exemplo, podemos simular isso
    na linha de comando.
  4. Assim que o navegador
    recebe a resposta,
  5. que é o HTML que vemos aqui,
    ele deve converter
  6. toda a marcação em algo
    que vemos na tela aqui.
  7. Já imaginou como isso acontece?
  8. Sabe, agora que você falou nisso,
  9. parece
    até mágica.
  10. Não é mágica.
  11. O navegador segue uma
    série de etapas bem-definidas
  12. e começa com o processamento
    do HTML e a criação do DOM.
  13. A especificação HTML contém
    um conjunto de regras para
  14. processar os dados recebidos.
  15. Por exemplo, o texto contido
    nos colchetes angulares
  16. tem significado especial no HTML
    e funciona como uma tag.
  17. Como resultado,
    sempre que encontramos uma tag,
  18. o navegador emite um token.
  19. Neste caso,
    é o token StartTag: html.
  20. Depois, temos o token StartTag:
    head e assim por diante.
  21. O processo inteiro é feito
    pelo criador de tokens e,
  22. enquanto ele está
    fazendo esse trabalho,
  23. há outro processo que
    está consumindo esses tokens
  24. e os está convertendo
    em objetos de nó.
  25. Por exemplo,
    convertemos o primeiro token HTML
  26. e criamos o nó HTML.
  27. Consumimos o próximo token
    e criamos o nó head.
  28. Há uma relação
    entre os nós?
  29. Sim, observe que o criador de tokens
    emite tokens iniciais e finais,
  30. o que indica a relação
    entre os nós.
  31. O token StartTag: head
    vem antes do token EndTag: HTML,
  32. o que indica que o token head
    é um filho de HTML.
  33. Da mesma forma, os nós meta e link
    são filhos do nó head e assim por diante.
  34. Por fim, quando consumimos
    todos os tokens,
  35. chegamos ao modelo de objeto
    de documento, ou DOM,
  36. que é uma estrutura de árvore
    que captura o conteúdo
  37. e as propriedades do HTML
  38. e todas as relações
    entre os nós.
  39. Legal, convertemos o HTML
    no modelo de objeto de documento.
  40. É fácil ver por que
    ele é chamado de árvore do DOM.
  41. Sim, veja também que esses objetos
    contêm todas as suas propriedades.
  42. Por exemplo, o nó de imagem
    tem um atributo source
  43. e este nó aqui
    também tem a mesma propriedade.
  44. O DOM é a representação
    completa da marcação HTML.
  45. OK, baixamos todo o HTML e
    criamos um DOM.
  46. Entendi. E depois?
  47. O navegador
    constrói o DOM de modo incremental
  48. e você pode aproveitar isso
  49. para agilizar
    a renderização das páginas.
  50. Isso é algo que as páginas de
    pesquisa do Google
  51. fazem muito bem.
    Vou lhe mostrar.