4

Esto es un recorte de un archivo que utilizo actualmente:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link id="SKIN.CSS" rel="stylesheet" charset="UTF-8"/>
<script id="APP.JS" type="text/javascript" charset="UTF-8"></script>
<script id="GUI.JS" type="text/javascript" charset="UTF-8"></script>
<title></title>
</head>
<body>
<script>

window.Gui = { };

window.App = { }

( function( ) {
  var ajax = new XMLHttpRequest( ),
      remains = 3, // Archivos que faltan por cargar.
      response,
      tmp;

  // Solicitamos los archivos a cargar.
  ajax.onreadystatechange = onResponse;
  ajax.open( 'POST', 'config.php' );
  ajax.send( );

  function onResponse( ) {
    if( ( ajax.readyState == 4 ) && ( ajax.status == 200 ) ) {
      response = JSON.parse( ajax.responseText );

      // Cargamos el resto de archivos.
      tmp = document.getElementById( 'SKIN.CSS' );
      tmp.onload = onLoaded;
      tmp.href = response.skin;

      tmp = document.getElementById( 'APP.JS' );
      tmp.onload = onLoaded;
      tmp.src = response.app;

      tmp = document.getElementById( 'GUI.JS' );
      tmp.onload = onLoaded;
      tmp.src = response.gui;
    }
  }

  function onLoaded( ) {
    -- remains;
console.log( 'remains:', remains );

    if( !remains )
      setTimeout( Run, 0 );
  }

  function Run( ) {
  console.log( 'Se llamó a RUN( ).' );

    Gui.Init( );
    setTimeout( App.Run, 0 );
  }
} )( );
</script>
</body>
</html>

Realizo una llamada AJAX para obtener los nombres de 3 archivos a cargar, y establezco a mano los atributos src= y href= según corresponda, para cargarlos dinamicamente.

El asunto está en

function onLoaded( ) {
  -- remains;
  console.log( 'remains:', remains );

  if( !remains )
    setTimeout( Run, 0 );
}

Este código, en otros lenguajes, sería motivo mas que suficiente de expulsión directa del gremio.

Supongamos que ocurre la siguiente secuencia de eventos:

  1. Se carga el SKIN.CSS.
  2. Se llama a la función loaded( ), que se ejecuta por completo. `remains === 2'.
  3. Se carga el APP.JS.
  4. Se llama a la funcion loaded( ).
  5. Dentro de loaded( ), decremento remains, que pasa a === 1.
  6. Antes de entrar en el if, se carga el GUI.JS.
  7. Se ejecuta loaded( ). remains === 0.
  8. Entro en el if( ). La condición se cumple. Se ejecuta App.Run( ).
  9. El navegador continua en el punto 6, pero ahora ya puedo entrar en el if( ), porque remains === 0 (no lo era cuando se interrumpió).
  10. Se llama por segunda vez a App.Run( ).

¿ Esta secuencia de eventos es posible en Javascript, o el lenguaje garantiza que ninguna función será interrumpida por ningún evento ?

13
  • 1
    Javascript es monohilo, por lo que los eventos se atienden en secuencia, sin interrupción del anterior. Básicamente usa un planificador run-to-completion (ejecuta hasta la finalización). En servidores Node.js se aumenta el paralelismo y se aprovechan los núcleos del servidor aumentando el número de servidores, balanceando las peticiones entre ellos, pero dentro de cada servidor un script mal diseñado podría ralentizar el resto de peticiones que corren en el mismo, pero no afecta al de otros servidores. Commented el 28 may. 2017 a las 11:12
  • 1
    Bueno, se me olvidaban los Web Workers, hay algo más de información en blog.mozilla.org/javascript/2015/02/26/… sobre caminos para alcanzar el paralelismo en javascript. Según veo a partir de febrero de 2017 se ha agregado a la especificación ECMAScript: github.com/tc39/ecmascript_sharedmem Commented el 28 may. 2017 a las 11:14
  • @OscarGarcia Gracias por el comentario, pero no quiero usar varios hilos ni nada parecido. Solo me preguntaba hasta que punto los eventos asíncronos pueden interrumpir un código actualmente en ejecución. ¿ El código que muestro funcionará universalmente en cualquier navegador, o hay posibilidad de que alguno, en su implementación del lenguaje y los eventos, llame a App.Run( ) 2 veces ? Por supuesto, sin tener en cuenta posibles bugs de los navegadores; ciñéndonos exclusivamente a la especificación del lenguaje.
    – Trauma
    Commented el 28 may. 2017 a las 11:17
  • 1
    Ciñéndonos a la definición del lenguaje, es monohilo. No hay más, ni siquiera ECMAScript soporta multihilo, la librería de memoria compartida es para compartir datos entre diferentes procesos que corren en la misma máquina, pero un único proceso sólo puede contener un hilo y ejecutar los eventos en orden sin paradas del código por cambio de hilo. Commented el 28 may. 2017 a las 11:21
  • 1
    Te incluiré unos ejemplos de implementaciones alternativas usando callbacks y sin ellos que simplifican tu código y lo harán menos sensible a fallos de carga. Commented el 28 may. 2017 a las 12:09

1 respuesta 1

5

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).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.