Spanish, Mexican subtitles

← 03-28 El escáner de precarga

03-28 El escáner de precarga

Get Embed Code
6 Languages

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

  1. Cameron, ¿por qué no intentas dibujar
    la Ruta Crítica de Renderización
  2. para este ejemplo?
  3. Claro. Primero lo primero:
    pedimos este HTML.
  4. Luego comenzamos a construir el DOM
    y nos encontramos con este archivo CSS,
  5. que por supuesto tenemos que pedir.
  6. Continuamos construyendo el DOM
    y encontramos inmediatamente app.js,
  7. que bloquea el análisis.
  8. Así que paramos la construcción del DOM,
  9. solicitamos y esperamos por el archivo.
  10. Cuando finalmente obtenemos el CSS
    y hemos construido el CSSOM
  11. podemos ejecutar app.js
    y luego continuar construyendo el DOM.
  12. Luego nos topamos
    con el siguiente script, timing.js,
  13. así que bloqueamos
    el análisis en la descarga.
  14. - ¿Te parece bien?
    - Sí, es correcto.
  15. Sin embargo,
    esto puede tomar un tiempo.
  16. Primero bloqueamos app.js
    y esperamos que llegue.
  17. Luego timing.js y esperamos que llegue.
  18. Para optimizar este caso concreto,
    el navegador usa un proceso especial
  19. llamado escáner de precarga,
    que mira por adelantado el documento
  20. y trata de descubrir archivos CSS
    y JavaScript críticos, como timing.js.
  21. Está bien pensado, ¿así que incluso
    si el analizador está bloqueado,
  22. podemos descubrir timing.js
    e iniciar descargas de recursos críticos?
  23. Sí, exacto. En lugar de esperar
    a construir el modelo de objetos CSS
  24. y ejecutar app.js
    antes de solicitar timing.js,
  25. el escáner encuentra timing.js
    y lo solicita,
  26. mientras el analizador está bloqueado.
  27. Genial. Bueno, es bastante interesante.
  28. ¿Dónde puedo aprender más
    sobre el escáner de precarga?
  29. Chequea las notas del instructor.
    Encontrarás un par de buenos recursos
  30. que te ayudarán a explicar por qué existe
    el escáner de precarga y cómo opera.