YouTube

Got a YouTube account?

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

Spanish, Mexican subtitles

← 02-30 Analizar el CRP completo en DevTools

02-30 Analizar el CRP completo en DevTools

Get Embed Code
6 Languages

Showing Revision 6 created 09/29/2014 by Fran Ontanaya.

  1. DEV TOOLS
    No se puede optimizar lo que no se mide.
  2. Vale, hemos visto cada paso
    de la ruta crítica de renderización.
  3. Veamos cómo se hace de principio
    a fin y cómo encaja todo.
  4. Fantástico, justo lo que me hacía falta.
  5. Para hacer las cosas bien,
    usaremos la página de Hello World
  6. que tiene algunos estilos CSS embebidos,
    algo de texto y una imagen.
  7. Refresquemos para tener la traza íntegra.
    Veamos qué ocurre aquí.
  8. Como era de esperar,
    primero vemos la salida
  9. de la solicitud del documento HTML.
  10. Luego, un evento que dice
    que el servidor devuelve
  11. unas cabeceras de respuesta
    seguidas de datos.
  12. Ese es nuestro HTML.
  13. Luego, el navegador
    hace el parsing del HTML.
  14. Aquí es donde el navegador convierte
    los bytes recibidos en el árbol DOM.
  15. Si expanden esta nota podrán ver
    que nuestro parser de documentos
  16. encuentra la referencia
    a la imagen incrustada,
  17. lo que da comienzo a la petición.
  18. Una vez hecho esto, continúa
    con el parsing del HTML
  19. y cuando llega al final
    construye el modelo de objeto CSS.
  20. En este ejemplo, el CSS
    está embebido en la página,
  21. así que no hay peticiones CSS.
  22. Luego, el navegador hace el árbol
    de renderización
  23. y computa los estilos para el contenido
    que debería estar visible en la pantalla.
  24. Eso es lo que indica
    este evento de recálculo de estilos.
  25. Una vez terminado, sigue la presentación,
    que es donde se computa el lugar
  26. y el tamaño de los elementos
    del árbol de renderización.
  27. Al terminar, emite un evento de pintado
    y la página se renderiza en la pantalla.
  28. Sabes, cuando empezamos a analizar todo,
    parecía muy confuso.
  29. Pero en realidad está bastante claro.
    Está muy bien.
  30. Me alegra oírlo.