Further Adventures of the Event Loop - Erin Zimmer - JSConf EU 2018

What people said

Strong rec zhirzh · 2019-01 · Stack Overflow · on “Run time execution process of the function”

let's add line numbers to track the execution 01 $('#test').on(click, function() { 02 console.log('start'); 03 04 modifyDom(); 05 06 someAjaxCall(); 07 08 while(let i < 5) { 09 console.log(i); 10 i++; 11 } 12 13 setTimeout( 14 function(){ 15 console.log('Zero Delay'); 16 }, 17 0 18 ); 19 }); 01 : attaches the event handler wait for click ... click 02 : print 'start' on console 04 : perform DOM manipulations 06 : dispatch ajax request and wait for the response on networking thread (not the main thread) 08-11 i is 0 i is 1 i is 2 i is 3 i is 4 13-18 : add callback 14-16 to the timer thread (not the main thread) wait for threads to return control ... now, any following can happen: ajax and/or t

Recommends Steve · 2020-05 · Stack Overflow · on “Got confused with the following JS priorities”

Those questions are related to the event loop. I love this explanation [LINK] from Jake Archibald. The answers to interview questions would be Which one has higher priority callback or promise? -> I think what interviewer meant here is the priority of micro and microtask ques. Since promise accepts callbacks itself it may be a little confusing. Microtask queue has a higher priority than a macro. It means that the event loop will execute all callbacks in the microtask queue(aka promises) first and then in macro. (It's not really true because there is also a render task queue which is executed right after microtask que) you can check this video for more info [this video] . Are Fetch, setInterval al

Recommends user3919920 · 2020-08 · Stack Overflow · on “How to observe multiple task queues in JS event loop”

[this video] This will help you understand I think. Skip to the 7min mark. There can be multiple queues in the task queue, and then also micro task queue. In HTML terms, the event loop for a page or set of pages from the same domain can have multiple task queues. Tasks from the same task source always go into the same queue, with the browser choosing which task queue to use next.

Recommends Sathyesh · 2020-10 · Stack Overflow · on “Are there significant differences between the Chrome browser event loop versus the node event loop?”

Here is another video link [this video] by Erin Zimmer, who presented in the JS Conference. She talks about event loop implementation with different tasks like micro and macro tasks as well as in other environments like Node JS, Browser and Web workers. First watch Philip Roberts's video as mentioned by the OP and then this video.

Cites kikon · 2021-11 · Stack Overflow · on “How many repaints of the DOM will appending children in a for loop cause?”

Only once; see Erin Zimmer's continuation on the rendering pipeline [this video] Also, you may test it with something like: //document.body.innerHTML = ''; for (let i = 0; i < 100; i++){ const div = document.createElement('div'); document.body.appendChild(div); div.textContent = 'Hello'; let x = 0; for(let j = 0; j < 1e7; j++){ x += Math.sin(Math.random()) } }```

Cites NeNaD · 2021-12 · Stack Overflow · on “What is the difference between the event loop in JavaScript and async non-blocking I/O in Node.js?”

There are 2 different Event Loops: Browser Event Loop NodeJS Event Loop Browser Event Loop The Event Loop is a process that runs continually, executing any task queued. It has multiple task sources which guarantees execution order within that source, but the Browser gets to pick which source to take a task from on each turn of the loop. This allows Browser to give preference to performance sensitive tasks such as user-input. There are a few different steps that Browser Event Loop checks continuously: Task Queue - There can be multiple task queues. Browser can execute queues in any order they like. Tasks in the same queue must be executed in the order they arrived, first in - first out. Tasks