Spanish, Mexican subtitles

← 03-07 JavaScript y el CRP

Get Embed Code
6 Languages

Showing Revision 5 created 09/30/2014 by Fran Ontanaya.

  1. Optimizando JS
  2. Todas las cosas que pueden
    bloquear el renderizado
  3. Okay, creo que ya controlo
    la optimización de HTML y CSS,
  4. ¿pasamos ahora al árbol de renderizado?
  5. A punto. Aún no hemos hablado
    sobre JavaScript,
  6. y obviamente esa es una fase importante,
  7. así que echémosle un vistazo.
  8. Bien, déjame adivinar:
    ¿reducir, comprimir y guardar en caché?
  9. Exacto. Todo eso son buenas estrategias.
  10. Pero para JavaScript habrás visto
  11. a PageSpeed Insights quejarse de
    los scripts que bloquean el parser.
  12. Veamos lo que esto significa
    y cómo podemos optimizarlo.
  13. He extendido nuestra página
    de "Hola Mundo"
  14. con un simple script inline al final.
    Recorrámoslo.
  15. Primero, llegamos al DOM
    y buscamos el primer elemento span
  16. que, como vemos, contiene
    el texto de rendimiento web.
  17. A continuación, modificamos
    el elemento DOM
  18. cambiando su innerText
    y sus propiedades CSS.
  19. Parece sencillo.
  20. Sí. Esto muestra que JavaScript
  21. puede manipular a la vez
    el DOM y el modelo de objetos CSS.
  22. Es una herramienta muy útil.
  23. Y ahora se hace más interesante.
  24. Ahora creamos un nuevo elemento div,
    fijamos su contenido de texto,
  25. la propiedad color del CSS
    y lo anexamos a la página.
  26. Intentemos cargar la página
    desde nuestro teléfono.
  27. Fíjate que el texto ahora dice:
    "Hola estudiantes interactivos";
  28. en vez de: "Hola estudiantes
    de rendimiento web".
  29. Y también tenemos nuestro
    nuevo elemento justo abajo.
  30. Exacto, como era de esperar.
  31. ¿Hay algo aquí que podamos hacer
    para optimizar el rendimiento?
  32. Claro. Podríamos dedicar un curso entero
    a la optimización de JavaScript.
  33. Pero aquí, más que el código, lo que
    importa es cómo incluirlo en la página.
  34. Volvamos un paso atrás
  35. y pensemos cómo haría el navegador
    para construir esta página.