Portuguese, Brazilian subtitles

← JavaScript and the CRP - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 13 created 08/12/2016 by Udacity Robot.

  1. [ÁUDIO VAZIO]
  2. Acho que já entendi a
    otimização de HTML e CSS.
  3. Vamos passar para a
    árvore de renderização?
  4. Quase. Ainda não falamos
    sobre o JavaScript e,
  5. obviamente,
    essa é uma etapa importante;
  6. então, vamos dar uma olhada.
  7. Certo. Deixe-me adivinhar:
    minificar, compactar e armazenar em cache?
  8. Isso. São todas
    boas estratégias.
  9. Mas, para o JavaScript,
    talvez você tenha visto
  10. reclamações sobre
    scripts bloqueadores de análise.
  11. Vamos ver o que isso significa e
    como podemos otimizá-lo.
  12. Ampliei a página
    "Hello world" com um
  13. script inline simples
    no final.
  14. Vamos analisá-lo.
  15. Primeiro, acessamos o DOM
    e procuramos o primeiro elemento span.
  16. O qual, como você vê,
    contém o texto sobre desempenho da Web.
  17. Depois, modificamos o elemento DOM,
    alterando o texto interno
  18. e também
    as propriedades CSS.
  19. >> Parece bem simples.
  20. É, isso mostra
    que o JavaScript pode manipular
  21. tanto o DOM quanto
    o modelo de objeto CSS.
  22. É uma ferramenta muito avançada.
  23. E daqui em diante
    fica um pouco mais interessante.
  24. Criamos um novo elemento div,
    definimos o conteúdo de texto,
  25. a propriedade de cor CSS,
    e anexamos à página.
  26. Vamos tentar carregar esta página
    no celular.
  27. Note que agora o texto diz
    "Hello interactive students"
  28. em vez de
    "Hello web performance students".
  29. E o novo elemento
    está logo abaixo.
  30. Conforme esperado.
  31. Podemos fazer alguma coisa aqui
    para otimizar o desempenho?
  32. É claro. A otimização do JavaScript
    dá um curso inteiro.
  33. Mas, neste exemplo específico,
    a questão não é bem o código,
  34. mas como ele é incluído na página.
  35. Vamos recuar um pouco e
    pensar em
  36. como o navegador
    faz para criar esta página.