Параллельная модель и цикл событий.

Параллелизм в JavaScript основывается на  модели "событийного цикла". Эта модель совершенно иная, чем в других языках, например C или Java.

Концепция жизненного цикла программы

В следующей секции, объясняется теоретическая модель. Современный JavaScript движки довольно сильно оптимизировали этот процесс.

Визуальное представление

Стек

Вызовы функции формируют стек контекстов(? ) .

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

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

g(21);

Когда вызывается g,  создаётся область видимости содержащая аргументы g и локальные переменные. Когда g вызывает f, создаётся вторая область видимости и помещается в стэк вперед первой, которая содержит аргументы f и её локальные переменные. Когда f возвращает результат, верхний элемент из стека удаляется. Когда g возвращает результат, стэк очищается.

Куча

Объекты размещаются в куче.Куча — это ссылка на определенную неструктурированную области памяти.

Очередь

Жизненный цикл JavaScript имеет очередь событий. Очередь событий — список событий, подлежащих обработке. Каждое событие связано с функцией. Когда стэк пустует, сообщения обрабатываются по очереди.Вызывается соответствующая функция (и, таким образом, создаётся начальный элемент стека). Обработка сообщений заканчивается, когда стек становится пустым снова.

Цикл событий

Событийный цикл получил свою модель, потому что отслеживает новые события в цикле:

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

queue.waitForMessage ожидает события если очередь пуста.

"Run-to-completion"

Each message is processed completely before any other message is processed. This offers some nice properties when reasoning about your program, including the fact that whenever a function runs, it cannot be pre-empted and will run entirely before any other code runs (and can modify data the function manipulates). This differs from C, for instance, where if a function runs in a thread, it can be stopped at any point to run some other code in another thread.

A downside of this model is that if a message takes too long to complete, the web application is unable to process user interactions like click or scroll. The browser mitigates this with the "a script is taking too long to run" dialog. A good practice to follow is to make message processing short and if possible cut down one message into several messages.

Adding messages

In web browsers, messages are added any time an event occurs and there is an event listener attached to it. If there is no listener, the event is lost. So a click on an element with a click event handler will add a message--likewise with any other event.

Calling setTimeout will add a message to the queue after the time passed as second argument. If there is no other message in the queue, the message is processed right away; however, if there are messages, the setTimeout message will have to wait for other messages to be processed. For that reason the second argument indicates a minimum time and not a guaranteed time.

Связь нескольких потоков между собой

Web Worker или кросс-доменный фрейм имеют свой собственный стэк, кучу и очередь событий. Два отдельный событийных потока могут связываться друг с другом, только через отправку сообщений с помощью метода postMessage. Этот метод добавляет сообщение  в очередь другого если он конечно принимает их.

Никогда  не блокируется

Очень интересное свойство цикла событий в JavaScript, что в отличие от множества других языков, поток выполнения никогда не блокируется. Обработка I/O обычно осуществляется с помощью событий и функций обратного вызова, поэтому даже когда приложение ожидает запрос от IndexedDB или ответ от XHR, оно может обрабатывать другие процессы, например пользовательский ввод.

Существуют хорошо известные исключение как alert или синхронный XHR, но считается хорошей практикой избегать их использование.