Jake Archibald on the web browser event loop, setTimeout, micro tasks, requestAnimationFrame, ...
HTML-код
- Опубликовано: 27 сен 2024
- "In The Loop" presented by Jake Archibald at JSConf.Asia 2018
Have you ever had a bug where things were happening in the wrong order, or particular style changes were being ignored? Ever fixed that bug by wrapping a section of code in a setTimeout? Ever found that fix to be unreliable, and played around with the timeout number until it kinda almost always worked?
This talk looks at the browser's event loop, the thing that orchestrates the main thread of the browser, which includes JavaScript, events, and rendering. We'll look at the difference between tasks, microtasks, requestAnimationFrame, requestIdleCallback, and where events land.
Hopefully you'll never have to use setTimeout hacks again!"
Jake is developer advocate for Google Chrome. He's one of the editors of the service worker spec, so he's into offline-first, push messaging and web performance.
JSConf.Asia - Capitol Theatre, Singapore - 27 January 2018
Source: 2018.jsconf.asia/
License: For reuse of this video under a more permissive license please get in touch with us. The speakers retain the copyright for their performances.
When you want to be a stand up comedian and life makes you a JS expert
on point :)
hahahahah
Seriously! He's super funny. I would honestly love to watch him do stand-up.
Comedy is his hobby, it seems.
Lmao
Jake is a truly genius presenter, sliding in jokes in between heavy subjects (like microtasks) so that audience can take mental rests
Humour is his hobby I guess. At least I find him funny, tough crowd...
In standup gigs they mic the audience too. They were more alive than the video suggests (but still pretty quiet)
Yeah I actually found his jokes to be pretty funny. I at least chuckled at most of them. My guess is the audience might have been giggling and chuckling too, but the laughter wasn't picked up by his lav mic. At 18:30 when he talks about the fizzy water, it's dead silent, but the way he rifted on it for a second indicates that he was probably getting a decent response from the audience.
@@JAlexanderCurtis Thats him that you responded too ;-) Great work on the presentation @jake quality. Thanks for your efforts.
@@jakearchibald Thanks for this !
wow
He really hit the core of the event loop. Something that is so important to get hold of tasks, micro tasks.
Hot damn, Jake.. this is one of the best talks I've seen. Well done.
7:08 Task Queues
8:55 render steps
12:15 hence the timeOut loop is not 'render blocking'.
12:29 but if you want to run code that has anything to do with rendering, a task is the wrong place to do it, coz it's on the 'opposite' side of the world from rendering, as far as the event loop is concerned.
24:00 MicroTasks (RAF - RequestAnimationFrame finishes here )
give us a smmary of the jokes
Came here to learn about event loops.
I now fear those who drink fizzy water.
This is the best event loop talk on YT.
Well balanced mental load / mental rest.
Thank you, Jake!
Jake is an amazing asset for the JS community!
I always watch this when I feel " you don't know JavaScript yet,,"
Who is here because of Fireship?
🙋🏻♀️🔥
Me me 🤗🤗
Hola
yup :)
me during may lockdown covid
I was today years old when I found out how event loop actually works. Thanks a lot, Jake! Wish you many years of health!
I wish I learnt all my CS courses from you Jake.
Super great explainer, whoever did the design for the animations deserves a massive shout-out. Well thought out and great visual metaphors too.
I do all my own stunts
@@jakearchibald Full Stack Speaker, i guess :v ... Can you tell us what software do you use or how you create the animation, please?
@@rizaldywirawan He uses HTML+CSS+JS+SVG
This talk is soooo informative. A single effective visual plus narrative beats a thousand words.
Could someone enlighten me of the tool or the way for the speaker to make the slides (or something else) ?
I'm also interested. I think he used HTML5 and js to make this
I think I know you from Columbus Ohio??
This talk has to be displayed in the best Cinemas :) amazing talk 3 years later and im totally sure that will be a good talk to watch again in 2035
"You don't want to write a code that is like a sneeze". Yeah, this is probably one of the best talks I've ever seen, actually pedagogical if we think about it
Thank you for explaining event loops for all of us 5-year-olds, Jake! You the best!
This video sits much better after third time 'through the loop'. Thanks Jake for creating it.
I was that guy who would throw in a setTimeout and play around with the delay number until the manual test matched the automated test.
It would raise an eyebrow at code reviews, but I'm a pragmatist not a purist.
Now I know why I was right! Thanks Jake.
You can have a new hobby at which you are extremely good and it's technical presentations about JS and web.
Aaaa, also, the how different queues are processed made shivers run up my neck. Really excited. Wife (who is senior QA) is getting jealous of you :p
Love Jake's talks, always super solid, informative and even include some giggles from time to time!
Great, fun to watch, very intuitive (with a good sense of humor) presentation for a deep insight into what is going on inside the JS event loop. Jake, you definitely nail JS event loop.
Now this is what you call a talk. Impeccable 👌
I want to download this video and save it in my laptop, just in case youtube goes down. That's how much I love this video.
I never Heard about Microtasks even though I am using Promises, Great visual comparison between JSTasks, rAF and Microtasks. Awesome stuff Jake.
great video! I might need to watch again to wrap up the concepts but he's a great speaker with fun ! I hope he gives us more talks like this
What an amazing talk. It cleared out lot of my queries around the event loop, when the browser prepares a frame, and how much javascript it runs before the frame. Thanks, Jake!!!
This is awesome! I had developed a parallax feature using rAF, and I was wondering why it was smooth on Chrome but janky on Edge, this explains it :)
This guy is super awesome and this talk is probably the best talk on the event-loop out there! Thanks a lot!
The main Fred.
I find it very difficult to discuss the movie Thor.
i cannot unhear this hahaha
:D
Thank you for including the part about microtasks! Very informative!
Just like always, amazing presentation, especially when you magically swapped those lines around at 2:25 😲
nani?!
My life as a developer changed after this talk!
Finally, a JS expert with a sense of humor !
His way of explaining things with so much clarity and hilarious jokes in between, is on the next level 😂🙌 Amazing!
Didn't know anything about this. Now I feel like wanting to dig more into JavaScript
One of the best talks till date on event loop! Thanks a lot!
Why the F isn't this video watched 1 million times? This is amazingly informative and presented in a really really good way :-)
Very few people are capable of understanding this.
Wow, what a fantastic performance! Entertaining and informative, with deep philosophical thoughts like sneezing metaphor or orbits and sun animations. The lector is brilliant.
That's a tough crowd if i've ever seen one... My man is killing it there!!
This is one of the best talks I have seen after Phillips Roberts What the heck is the event loop? Both these talks helped me understand the Event Loop and get better context
I then took the JS the Hard Parts from Front End Masters by Will Sentence. It was great. I got a better understanding of the the async and concurrency model of JS
I have followed the same path, except in reverse. I came here after watching all of Will Sentence's videos on Front End Masters. He is by far my favorite instructor there.
Never had such a clear vision of the event loop. Thanks jake
Who else was sent here by Fireship??
For those who find this incredibly interesting, Jake and Surma have a talk show called HTTP 203
This is the best talk on the "event loop" I've ever seen!
Most informative and engaging talks on event loops! Kudos Jakes.
Best event loop explanation I've ever seen. Microtasks are not getting enough attention these days, and this guys just makes it look so simple
Just AWESOME. Jake you're my man.
Superb talk Jake. As always!! Now time for a lime soda water.
That piano bit was straight up Larry David-esque humor and I loved it!
Great humor, tough crowd :) But honestly, very informative, thank you!
that looks and sounds like a real world Sheldon, Great talk !!
A classical Archibald. Great talk!
When Jeremy from Peep Show finally gets his act together.
5:25 "Are the arguments in the wrong order?"
No, because 'callback' is mandatory, but 'ms' is optional. This is valid JS: setTimeout(callback);
True, but the API would be better if ms was not optional, and was the first parameter.
@@jakearchibaldWhy?
@@DonaldFranciszekTusk What's the benefit of ms being optional?
Absolute legend, this man.
2:56 definition of subtle joke/ punch delivery
That was easy to follow even though I get stuck a lot when it comes to frontend programming. Good job.
Love the main thread animation.☺️
What a great talk! So much useful information presented in a convenient and easy to understand way
Best explanation of event loop, indeed
That laughter at the end "back to the studio" :D
I disagree about fizzy water, but this is a fantastic talk. Thanks!
one of the best talks I have ever seen. !!
The best explanation of the Event Loop out there 👍
I feel like I just started learning this stuff and I've been doing it for so long. Amazing!
This is the best video on event loop so clear!
Amazing video. You make the subject very clear
brilliant talk
One of the best talks I have ever seen!
This was an amazing talk, the visuals really helped produce a mental image of what goes on in the event loop at any given time.
I love this talk, great job
legendary video
this is the best explanation of even loops
This is such a tough audience, this guy is hilarious to me😂😂😂
Porbably introverts. I’m one myself and I hate it when the audience laughs like horses. It kills any joke for me.
Great talk, but now I realize why JS in the browser is so frustrating to deal with.
I like how he uses a joycon for the slides
If you are watching it in 2021, example with animation square from 1000 to 500 doesn't work, I don't why, but this doesn't work anymore if it of course ever worked, I've not checked it before
Great talk! And his level of understanding is inspirational
so... as a novice self taught dev. My general first understanding of the event loop is that its a way to sort the handling of code to handle the (Fastest and best) line for speed and keep most other stuff on the bench warming up for its time to shine (run).... Yay or nay?
soda water bit was hilarious btw
Best explanation you can find
wow that was really great talk, i did know that microtasks existed but didn't know when it was executed. Also about the difference between .click() and a user click, shouldn't we have a JS way to make it exactly like users click or dispatching an event click works?
As always your job was amazing, but gosh, it was a bit sad not hearing the crowd
My gosh, the only presentation where I had to set playback speed to lower value.
this is awesome, really well explained.
Great talk
new to event loop, and wondering does this concept apply to node.js event loop?
This was mind blowing
I love his accent:
fing
fhread
fhink
nofing
sound like pure British between Manchester n London Loop
Great explanation, though the description mentions bits about requestIdleCallback which I did not notice.
Hah, that's because conferences often ask for an abstract before the talk is written. requestIdleCallback isn't that interesting, it just queues a task when it thinks the user is idle.
The most wholesome video I saw today.
When I use the 22:15 code to execute, my effect is inconsistent with the video.
It stopped while moving towards 1000px and stopped at 500px.
I think this is caused by changing the transform to 'translateX(500px)'; in the second task cycle.
Is what I said correct?
```
const button = document.getElementById('btn');
const box = document.getElementById('box');
button.addEventListener('click',()=>{
box.style.transform='translateX(1000px)';
box.style.transition='transform 1s ease-in-out';
requestAnimationFrame(()=>{
requestAnimationFrame(()=>{
box.style.transform='translateX(500px)';
})
})
})
```
At 26:32 "we get our mutation observer callback". Where is it? This code block looks exactly the same as code at 25:10 generating 200 events. What's the code change done that defines/uses these mutation observer callbacks?
This dude got name like some main boss in diablo
Amazing talk. Cleared my concepts. Good Job !
Our Mitochondria loop might work somehow similar except it includes also an gene monetizer / ATP coiner 🙂
His delivery reminds me of Ricky Gervais soooooooo much, except for the cussing and the beer :P
Jake makes me think of Moss from IT Crowd.
This talk was SOOO GOOOd. TYSM 🙏
Tough crowd. This guy was hilarious!
11:12 I don't understand... After first doing the "document.body.appendChild(el)" task, why would the event loop not do a page render and THEN do the next task: "el.style.display = 'none'" before rendering again???
Those commands do not queue tasks