Modelo de concurrencia y loop de eventos

Conceptos de un programa en ejecucin

Las siguientes secciones explican un modelo terico. Los motores modernos de JavaScript implementan y optimizan fuertemente la semntica descrita a continuacin.

Representacin visual

[Stack, heap, queue]

Pila (Stack)

Las llamadas a funcin forman una pila de frames. Un frame encapsula informacin como el contexto y las variables locales de una funcin.

function f(b) {
  var a = 12;
  return a + b + 35;
}

function g(x) {
  var m = 4;
  return f(m * x);
}

g(21);

Cuando se llama a g, un primer frame es creado, el cual contiene los argumentos y variables locales de g. Cuando g llama a f, un segundo frame es creado y colocado encima del primero, con los argumentos y variables locales de f. Cuando f termina de ejecutarse, el ltimo frame (en este caso f) es sacado de la pila (djando solo el frame de g). Cuando g termina de ejecutarse, la pila est vaca.

Montculo (Heap)

Los objetos son colocados en un montculo, el cual, como su nombre lo dice, denota una gran regin de memoria, mayormente sin estructura u orden.

Cola (Queue)

Un programa en ejecucin en JavaScript contiene una cola de mensajes, la cual es una lista de mensajes a ser procesados. Cada mensaje se asocia con una funcin. Cuando la pila est vaca, un mensaje es sacado de la cola y procesado. Procesar un mensaje consiste en llamar a la funcin asociada al mensaje (y por ende crear una frame en la pila). El mensaje procesado termina cuando la pila est vaca de nuevo.

Loop de eventos

El loop de eventos obtiene su nombre por la forma en que es usualmente implementado, la cual generalmente se parece a:

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

queue.waitForMessage espera de manera sncrona a que llegue un mensaje si no hay ninguno actualmente.

"Ejecutar-hasta-completar"

Cada mensaje es procesado completamente antes que cualquier otro mensaje sea procesado. Esto ofrece algunas propiedades convenientes al momento de pensar en un programa, incluido el hecho de que cada vez que una funcin se ejecuta, sta no puede ser terminada y se ejecutar totalmente antes de que cualquier otro cdigo se ejecute (y de este modo pueda modificar la informacin que la funcin manipula). Esto es diferente de C, por ejemplo, donde si una funcin se ejecuta en un hilo, esta puede ser detenida en cualquier punto para ejecutar cdigo en otro hilo.

Una desventaja de este modelo es que, si un mensaje toma mucho tiempo en completarse, la aplicacin es incapaz de procesar las interacciones de usuario, tales como clicks o scrolling. El navegador mitiga esta desventaja con el mensaje "un script esta tomando mucho tiempo en ejecutarse". Una buena prctica es hacer que el procesamiento del mensaje sea corto y, si es posible, dividir une mensaje en varios ms.

Aadiendo mensajes

En los navegadores web, los mensajes son aadidos cada vez que un evento ocurre y hay un escuchador de eventos asociado a l. Si no hay un escuchador, el evento se pierde. De este modo, al hacer click en un elemento con un manejador de eventos tipo click, se aadir un mensaje. Lo mismo sucede en otros tipos de eventos.

Al llamar setTimeout se aadir un mensaje a la cola despus de el tiempo especificado como segundo parmetro. Si no hay ningn otro mensaje en la cola, el mensaje es procesado en el momento; sin embargo, si hay mensajes en la cola, el mensaje de setTimeout tendr que esperar a que los otros mensajes sean procesados. Por esta razn el segundo parmetro indica el tiempo mnimo tiempo esperado y no es una garanta.

Cero retraso

Cero retraso no significa que una llamada a una funcin (call back) se disparar despus de cero milisegundos. Al llamar setTimeout con un retraso de 0 (cero) milisegundos, no se ejecuta la llamada de la funcin despus de el intervalo dado. La ejecucin depende del nmero de tareas en espera en la cola. En el ejemplo de abajo el mensaje "this is just a message" ser escrito en la terminal antes de que el mensaje de la llamada a la funcin sea procesado, esto es por que el retraso es el tiempo mnimo requerido para que el programa procese la peticin, pero no es un tiempo garantizado.

(function () {
  console.log("this is the start");

  setTimeout(function cb() {
    console.log("this is a msg from call back");
  });

  console.log("this is just a message");

  setTimeout(function cb1() {
    console.log("this is a msg from call back1");
  }, 0);

  console.log("this is the  end");
})();

// "this is the start"
// "this is just a message"
// "this is the end"
// cabe notar que la funcin retorna en este punto (undefined)
// "this is a msg from call back"
// "this is a msg from call back1"

Varios programas comunicandose al mismo tiempo

Un web worker o cross-origin iframe tiene su propia pila, montculo y cola de mensajes. Dos programas diferentes solo se pueden comunicar enviando mensajes a travs del mtodo postMessage. Este mtodo aade un mensaje al otro programa si ste ltimo escucha eventos de tipo message.

Nunca se interrumpe

Una propiedad muy interesante del modelo de loop de eventos es que JavaScript, a diferencia de otros lenguajes, nunca interrumpe otros programas en ejecucin. Manejar operaciones de I/O (entrada/salida) es normalmente hecho a travs de eventos y llamadas a funcin, de modo que cuando la aplicacin, por ejemplo, est esperando por el retorno de una consulta IndexedDB o una peticin XHR, sta puede continuar procesando otras cosas como interacciones con el usuario (e.g. clicks).

Excepciones a esta regla existe en versiones anteriores del lenguaje, tales como alert o XHR sncrono, pero es considerada una buena prctica evitar su uso. Finalmente, hay que estar conscientes que hay excepciones a las excepciones (pero son usualmente errores de implementacin mas que otra cosa).