Scripts y Carga de recursos
Contenidos
Deploy de un sitio html estático aumentado con JavaScript.
Realizaremos una subida a producción automatizada utilizando la plataforma Netlify. Si no tienes una cuenta no te preocupes, puedes vincular tu cuenta GitHub para crear una cuenta automáticamente.
Instrucciones
- Crear repositorio en cuenta propia de GitHub a través de un fork
-
Agregar un nuevo repositorio remoto con el siguiente comando:
git remote add production git@github.com:<TU-USUARIO>/<TU-REPO-PARA-DEPLOY>.git - Subir repositorio a cuenta propia
git push production main - Crear cuenta Netlify
- Crear nuevo sitio
- Asociar repositorio desde cuenta propia
- Configurar repositorio
real-pageen la opciónBase directory - Revisar sitio en Netlify
- Instalar lighthouse y correr en una ventana incógnito
- Vamos a aplicar mejoras en:
- Carga CSS HEAD
- Carga Imágenes fuera del above the fold
- Carga scripts dependientes e independientes
- Error al hacer jQuery defer y como solucionarlo con window y el evento ‘load’
Carga de recursos en sitios web.
Haremos un análisis de performance a través de Google Chrome. Para esto abriremos la herramienta de desarrolladores y buscaremos la pestaña llamada “performance”. Seguiremos las instrucciones para grabar y obtener un perfil de rendimiento del sitio. Ahora revisaremos la sección Event Log y sólo marcaremos la que dice “loading”.
Interpretación del HTML por bytes
El análisis del documento HTML que se pide al servidor se realiza a través de bytes que se procesan y pasan por un proceso de interpretación que termina en la generación del Árbol DOM. Esto se realiza de forma Incremental.
¿Qué pasaría si un script agrega un nuevo nodo mientras se esta procesando el HTML?
revisemos el siguiente link
Si queremos ver un elemento HTML transformado en un Nodo JavaScript observemos la siguiente Jerarquía de prototipos disponible para algunos elementos:
- Elemento <p>
- [Elemento
](https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadingElement) - [Elemento
](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement)1 - [Elemento
Renderización del documento visible para el usuario
Una vez procesado el HTML por completo el árbol DOM está completo, pero ¡Aún no estará visible para el usuario! esto es porque queremos evitar una situación denominada FOUC (flash of unstyled content )
Utilizaremos el directorio simple-page y el directorio assets-server para poner a prueba este concepto. Abriremos 2 ventanas de la terminal. En la primera correremos el siguiente comando:
npm run start:simple-page
En la segunda ventana vamos a correr:
npm run start:assets-server
¡Comenzaremos a experimentar!
Terminar laboratorio
Para finalizar el ejercicio, con los cambios aplicados a real page relacionados al informe de Lighthouse debes editar el archivo lighthouserc.js agregando la URL completa del sitio que subiste a Netlify en la sección collect del archivo:
module.exports = {
ci: {
collect: {
url: [
'<TU_URL_COMPLETA>' //<-- NO OLVIDES EDITAR Y AGREGAR TU URL
]
},
assert: {
...
},
upload: {
...
},
},
}