Further Adventures of the Event Loop - Erin Zimmer - JSConf EU 2018
ฝัง
- เผยแพร่เมื่อ 20 มิ.ย. 2018
- Most JavaScript developers are probably familiar with the event loop. It’s how JavaScript handles I/O events without blocking, even though it’s single-threaded. Event callbacks are added to the task queue. The browser then takes a callback from the queue and runs it from start to finish. Then it decides to either repaint or run another callback. Simple, right?
But what about web workers? And promises? And what happens when your JavaScript isn’t running in a browser? In this talk, we’ll look at how multi-threaded event loops work, how promises differ from other callbacks, and what goes on in the Node event loop.
OMG JSConf EU is coming back in 2019 2019.jsconf.eu/ - วิทยาศาสตร์และเทคโนโลยี
Better late than never! Really happy to find such informative video. It’s definitely one of the most helpful explanation how event loop works as for me. Thank you!
Sad nobody got the "off by one error" joke at 17:55. Nice one.
Wow. This really took everything I knew and connected the dots so clearly! Well done!!
Great talk, this cleared up some big misconceptions I had about this topic. I'm really glad that I didn't have to skim through another class on the concept of callbacks/promises to get this info.
This is absolutely one of the most helpful video about event loop. Thanks a lot.
It clearly gave a great insight on the node js's event loop which is great to know for writing Unit tests in React ;) Since the Browser event and the NodeJs event loop are different, we mostly see workarounds involving setImmediate() in tests.
The crowd wasn't very helpful with the laughs, but you did great anyways! Thanks for the talk!
The "laughs" appear often, also in other talks, but only when the speaker has a short break while speaking. I believe those are not laughs from the audience, but the microphone getting more sensitive and picking up different noises that sound like laughs. This is just an idea, though :D Makes me not sorry for the speakers
Yes, I was going to mention this as well. A lot of the bits that might sound like laughter seems much more likely they are audio artefacts as the background noise suppression kicks in.
Nice and helpful talk, it's indeed a good sequel to Phil Robert's. Thank you very much :-)
Stupendous! Explanation. I am all clear with event loop now
very good talk : i learned a lot and easily, thanks !
Thanks for explaining what a 'microtask' is. I'm working with testing async stuff in Angular and couldn't figure out something in their API called 'flushMicrotasks' and your talk helped! Thanks
Brilliant talk! Thanks so much!
That was awesome! Two thumbs up 👍👍
Really nice talk! Thanks!
Great talk, learned a lot, thank you =)
this is really very nice explanation
great content, great explanation
brilliant talk, thanks
Loved it, something that seemed complicated is actually dead simple!
This is a great talk. Thank you Erin for translating the concept into a JavaScript developer language I can understand.
I've got one question though - why everybody's got vodka on their tables?
Very nice! Thank you!
Nice talk! Thanks
great talk!
very helpful~ Thanks
A really great topic she has covered.
Great jokes tho.
This audition should've been listening to her in the beginning..
really helpful, thanks
One mistake I feel in the explanation of event loop.
If a queue task is picked up first. Then microtask loops. Not true. If microtask has any task it is given priority. Not the way the sequence is written in slide. According to slides, as soon as callstack is empty it pops up queue tasks first and then goes to a microtask loop. Try running below code and the output would be 10, 30, 20.
```
function abc(){
console.log(10);
setTimeout(() => console.log(20), 0);
Promise.resolve(30).then(res => console.log(res));
}
abc();
```
I believe final snippet (14:03) is not entirely accurate. The microtask queue also flushes between animation tasks. It basically flushes every time the call stack returns.
super clear
Very nice
hi, great talk !! But I have a doubt. From what I've read, the microtask queue has more priority than callback queue ? But according to the pseduo code, the callback queue(next task queue ?) has more priority. Can anymore correct my understanding ?
12:42
It's doing nothing only if the element did have the "slide" class already applied to it. If not, then after those two statements, it will have the class applied to it.
With such sharp voice she could be a Chorister in orchestra bands
10:03 Ah yes pretty much a daily occurrence in software devving
I thought that microtasks/services are being processed if there are 0 tasks in the current task list? I'm confused now.
Microtasks get processed when the stack is empty, which is a bit different to the current task list. Have a look at What the Heck is the Event Loop for more information about that side of things (th-cam.com/video/8aGhZQkoFbQ/w-d-xo.html)
isn't `taskQueue` a queue? And pop() will pop the element(task) from the end of the array (LIFO)?
LIFO would be a stack
Hello @JSConf, first of all, this is great community and this video is awesome , but just wanted to highlight a correction here @1:22, instead of this line `task = taskQueue.pop(); => task = taskQueue.dequeue(); `, would have made more sense
Thanks for the wonderful speech.
I have a question to ask:
```
setTimeout(() => {
console.log("timeout 1");
requestAnimationFrame(() => console.log("rAF callback"));
const now = performance.now();
while(performance.now() - now < 2) {} // lock the event loop
});
setTimeout(() => console.log("timeout 2"));
```
Sometimes the result is: timeout 1、timeout 2、rAF callback
Sometimes the result is: timeout 1、rAF callback、timeout 2
Is this related to isRepaintTime? How to judge this?