Concurrency model & event loop Flashcards
How does a browser use an event loop?
The browser uses the event loop to handle concurrency or parallel events.
What are the components of the concurrency model & the event loop (CMEL)?
Stack, Heap and Queue.
What is the Stack in terms of CMEL?
Function calls form a stack of frames.
The Stack (call stack) holds the state of what function is running (you can only add items to the stack)
What is a Heap in terms of CMEL?
Objects are allocated in a heap, which is just a name to denote a large, mostly unsecured, region of memory.
What is a Queue in terms of CMEL?
A JavaScript runtime uses a message queue, which is a list of messages to be processed. Each message has an associated function that gets called in order to handle the message.
How else is the Queue known?
The Queue is also referred to as message queue or task queue.
What is the event loop?
The event loop got its name because of how it’s usually implemented, which usually resembles:
while (queue.waitForMessage()) {
queue.processNextMessage();
}
queue.waitForMessage() waits synchronously for a message to arrive if there is none currently.
What is Event Loop - “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).
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.
How/When are messages added to the Event Loop?
In web browsers, messages are added anytime 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.
Because of the way this works, it means that the setTimeout message will have to wait for other messages to be processed first. Hence, there is no guarantee that the setTimeout will run immediately after its timer expires.
What do zero delays mean in the Event Loop?
Zero delay doesn’t actually mean the call back will fire-off after zero milliseconds. Calling setTimeout with a delay o (zero) milliseconds doesn’t necessarily execute the callback function after the given interval.
The execution depends on the number of waiting tasks in the queue.
How can two runtimes communicate with each other?
A web worker or a cross-origin iframe has its own stack, heap, and message queue. Two distinct runtimes can only communicate through sending messages via the postMessage method. This method adds a message to the other runtime if the latter listens to message events.
What is meant by “never blocking”?
A very interesting property of the event loop model is that JavaScript, unlike a lot of other languages, never blocks. Handling I/O is typically performed via events and callbacks, so when the application is waiting for an IndexedDB query to return or an XHR request to return, it can still process other things like user input.
Legacy exceptions exist like alert or synchronous XHR, but it is considered as a good practice to avoid them. Beware exceptions to the exception do exist (but are usually implementation bugs rather than anything else).
