Javascript se ejecuta en un único hilo en cada pestaña del navegador. Todos los navegadores lo implementan de la misma manera, aunque algunos ejecutan todos los javascript en el mismo hilo y otros dedican un hilo por cada pestaña.
La ejecución del código nunca es interrumpida por la llegada de un nuevo evento. En su lugar todos los eventos (que tienen un "listener" o "callback") se añaden a una cola de eventos pendientes de ser atendidos.
Los eventos javascript son atendidos en un bucle de eventos similar a éste:
while (colaDeEventos.esperarEvento()) {
colaDeEventos.procesarEvento();
}
Si un evento tarda demasiado tiempo en procesarse porque está mal diseñado (por ejemplo hacer una consulta síncrona XHR, caer en un bucle infinito o procesar cantidades elevadas de información) el navegador puede mostrar un mensaje de advertencia al usuario para permitirle detener la ejecución del script y recuperar (relativamente) la estabilidad del navegador o pestaña de navegación.
Tu código nunca sufrirá una condición de carrera gracias a que cada evento se ejecutará en ese bucle en modo "run-to-complete".
Quizá haya modos más sencillos de acelerar la carga de una página que retrasar la carga de todo, incluida la hoja de estilos.
Prueba de concepto
Antes de nada, para usar el servicio de retraso de carga https://www.deelay.me/ sobre HTTPS hay que aceptar la excepción de seguridad :(
Partiremos de este ejemplo para mejorarlo:
<script>
console.log("Inicio");
</script>
<link rel="stylesheet" href="https://www.deelay.me/1000/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://www.deelay.me/2000/https://cdn.rawgit.com/ojgarciab/af3bb1dd3720fa1ab027459bf08df104/raw/8660b7c868ee40237e2578da71c857aba34733c1/ejemplo1.js"></script>
<div class="alert alert-success"><a href="https://www.deelay.me" target="_blank">Agregar excepción de seguridad HTTPS</a>
<img src="https://www.deelay.me/3000/https://upload.wikimedia.org/wikipedia/commons/3/33/Button_exclamation.png" alt="" width="23" height="22" /></div>
<script>
window.addEventListener("load", function() {
console.log("Página cargada");
});
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM cargado");
});
console.log("Final del DOM");
</script>
El resultado puede ser algo como:
1.- Inicio +0
2.- Script ejecutado +3
3.- Final del DOM +3
4.- DOM cargado +3
5.- Página cargada +4
El "Script ejecutado" se retrasa debido a la carga previa de la hoja de estilos (1s) del propio javascript que muestra el mensaje (2s).
El script del final del documento ("Final del DOM") y "DOM cargado" se suceden de manera sucesiva y sólo "Página cargada" se retrasa un segundo adicional debido a los tres segundos adicionales desde la carga desde la hoja de estilos (podrían haber sido más si el navegador hubiera parado la interpretación del DOM durante la carga del javascript).
Agregando defer
al <script>
<script>
console.log("Inicio");
</script>
<link rel="stylesheet" href="https://www.deelay.me/1000/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://www.deelay.me/2000/https://cdn.rawgit.com/ojgarciab/af3bb1dd3720fa1ab027459bf08df104/raw/8660b7c868ee40237e2578da71c857aba34733c1/ejemplo1.js" defer></script>
<div class="alert alert-success"><a href="https://www.deelay.me" target="_blank">Agregar excepción de seguridad HTTPS</a>
<img src="https://www.deelay.me/3000/https://upload.wikimedia.org/wikipedia/commons/3/33/Button_exclamation.png" alt="" width="23" height="22" /></div>
<script>
window.addEventListener("load", function() {
console.log("Página cargada");
});
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM cargado");
});
console.log("Final del DOM");
</script>
1.- Inicio +0
2.- Final del DOM +1
3.- Script ejecutado +2
4.- DOM cargado +2
5.- Página cargada +3
Ahora se ejecuta el script del final del documento ("Final del DOM") tras la carga de la hoja de estilos (1s) sin esperar la descarga del javascript con el atributo defer
.
Se ejecuta el script externo tras los dos segundos de retraso e inmediatamente se da por finalizada la carga del "DOM".
Aún tardará un segundo más en finalizar la carga de la página aunque la imagen se puso en cola de descarga desde el primer momento.
Hemos ganado dos segundos hasta "Final del DOM" y un segundo en el resto.
Agregando la hoja de estilos al final
<script>
console.log("Inicio");
</script>
<script src="https://www.deelay.me/2000/https://cdn.rawgit.com/ojgarciab/af3bb1dd3720fa1ab027459bf08df104/raw/8660b7c868ee40237e2578da71c857aba34733c1/ejemplo1.js" defer></script>
<div class="alert alert-success"><a href="https://www.deelay.me" target="_blank">Agregar excepción de seguridad HTTPS</a>
<img src="https://www.deelay.me/3000/https://upload.wikimedia.org/wikipedia/commons/3/33/Button_exclamation.png" alt="" width="23" height="22" /></div>
<script>
window.addEventListener("load", function() {
console.log("Página cargada");
});
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM cargado");
});
var link = document.createElement('link');
link.href = 'https://www.deelay.me/1000/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
link.rel = 'stylesheet';
document.head.appendChild(link);
console.log("Final del DOM");
</script>
1.- Inicio +0
2.- Final del DOM +0
3.- Script ejecutado +2
4.- DOM cargado +2
5.- Página cargada +3
Todo el documento completo se analiza y ejecuta de manera casi inmediata (pero usando los estilos por defecto) ahorrando tres segundos desde la prueba de concepto y un segundo respecto a retrasar la carga y ejecución del javascript a costa de ver las hojas de estilo incorrecta durante unos instantes.
La ejecución del script será tras su carga (2s) y se da por finalizado el DOM (aunque aún quede una imagen y una hoja de estilos por cargar, aunque habrá terminado antes que la imagen).
En cuanto esos dos se terminan de cargar (3s desde el comienzo para la imagen y 1s desde "Final del DOM" para la hoja de estilo) se genera la "Página cargada".
Conclusión
¿Merece la pena hacer un XHR para obtener la hoja de estilos y javascript que hay que cargar?
- Para acelerar la visualización de la página basta con usar
defer
.
- La mejora en latencia comparado con el tiempo de visualización sin estilos y posterior "transformación mágica" no merece la pena.
Para acelerar la carga de las hojas de estilo lo mejor es hacer uso de la caché del navegador o incluir directamente las hojas de estilo en cada página en el lado del servidor.
En tu código bastaría con esperar a que el DOM estuviera cargado (document/DOMContentLoaded
) para llamar a tu función App.Run()
, pero si necesitas hoja de estilos esperaría a la carga de la página (window/load
).
App.Run( )
2 veces ? Por supuesto, sin tener en cuenta posibles bugs de los navegadores; ciñéndonos exclusivamente a la especificación del lenguaje.