Jake Archibald on the web browser event loop, setTimeout, micro tasks, requestAnimationFrame, ...

Поділитися
Вставка
  • Опубліковано 21 лис 2024

КОМЕНТАРІ • 536

  • @The9TKitsune
    @The9TKitsune 5 років тому +2523

    When you want to be a stand up comedian and life makes you a JS expert

    • @eritreanism
      @eritreanism 5 років тому +17

      on point :)

    • @oleksii208
      @oleksii208 5 років тому +7

      hahahahah

    • @markmhaslam
      @markmhaslam 5 років тому +63

      Seriously! He's super funny. I would honestly love to watch him do stand-up.

    • @MopeyFand
      @MopeyFand 4 роки тому +40

      Comedy is his hobby, it seems.

    • @perfect.stealth
      @perfect.stealth 3 роки тому +2

      Lmao

  • @ronniesunshine1163
    @ronniesunshine1163 4 роки тому +954

    Tough crowd, this is probably one of the best programming talks I've ever listened to

    • @ReachByteBurst
      @ReachByteBurst 2 роки тому +1

      true

    • @stefanplusplus917
      @stefanplusplus917 2 роки тому

      what do yo mean with tough crowd?

    • @andy_lamax
      @andy_lamax 2 роки тому +11

      I agree. This was a tough crowd

    • @bro...5849
      @bro...5849 2 роки тому +34

      @@stefanplusplus917 he means the crowd is difficult to make laugh

    • @TheMandySpace
      @TheMandySpace 2 роки тому +18

      I was there, more people laughed than you think. :D But i agree it is one of the best talks Ive ever seen

  • @buddhaburrito
    @buddhaburrito 3 роки тому +301

    Jake is a truly genius presenter, sliding in jokes in between heavy subjects (like microtasks) so that audience can take mental rests

  • @JaLikon65
    @JaLikon65 Рік тому +28

    Why on earth did people not stand up and cheer after this! This is EASILY the best talk I've ever seen on the JS event loop and related topics. Seriously, it takes other resources like 20x the time to explain this, and this is arguably more thorough then a lot of other resources. Just hats off man, WOW is this good.

  • @denis.klyuev
    @denis.klyuev 2 місяці тому +2

    I was today years old when I found out how event loop actually works. Thanks a lot, Jake! Wish you many years of health!

  • @Nyromancer
    @Nyromancer 6 років тому +1038

    Humour is his hobby I guess. At least I find him funny, tough crowd...

    • @jakearchibald
      @jakearchibald 6 років тому +130

      In standup gigs they mic the audience too. They were more alive than the video suggests (but still pretty quiet)

    • @JAlexanderCurtis
      @JAlexanderCurtis 5 років тому +24

      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.

    • @Litonfiredesign
      @Litonfiredesign 5 років тому +5

      @@JAlexanderCurtis Thats him that you responded too ;-) Great work on the presentation @jake quality. Thanks for your efforts.

    • @utsavprabhakar5072
      @utsavprabhakar5072 5 років тому +5

      @@jakearchibald Thanks for this !

    • @erikachurchman9417
      @erikachurchman9417 5 років тому

      wow

  • @SamiullahKhan
    @SamiullahKhan 6 років тому +130

    He really hit the core of the event loop. Something that is so important to get hold of tasks, micro tasks.

  • @dakedres
    @dakedres 5 років тому +29

    I love how it feels like he's going on completely unrelated tangents but it always seemlessly transitions back into the main idea

  • @benoitleger-derville4162
    @benoitleger-derville4162 6 років тому +324

    Best show and explanation ever about the the V8 event-loop / main thread / tasks / microtasks

    • @dinub8414
      @dinub8414 6 років тому +25

      Yep. Thanks to Jake! Worth mentioning, though, that the event loop doesn't run within the V8 javascript engine, but natively in the browser. The javascript runtime has no own event loop. I found Phil Roberts' talk very good, too: ua-cam.com/video/8aGhZQkoFbQ/v-deo.html

  • @atticoos
    @atticoos 6 років тому +209

    Hot damn, Jake.. this is one of the best talks I've seen. Well done.

  • @vishnusingh4118
    @vishnusingh4118 4 роки тому +160

    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 )

  • @maximofernandez196
    @maximofernandez196 2 роки тому

    "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

  • @maximlyakhov967
    @maximlyakhov967 2 роки тому +39

    This is the best event loop talk on YT.
    Well balanced mental load / mental rest.
    Thank you, Jake!

  • @SQUAADS
    @SQUAADS 3 роки тому +2

    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

  • @hgeogr
    @hgeogr 4 місяці тому +1

    This is one of the best education about event loop in JS. It really explains very well and helps to avoid mistakes.

  • @mattscheurich1037
    @mattscheurich1037 5 років тому +9

    Super great explainer, whoever did the design for the animations deserves a massive shout-out. Well thought out and great visual metaphors too.

    • @jakearchibald
      @jakearchibald 5 років тому +24

      I do all my own stunts

    • @rizaldywirawan
      @rizaldywirawan 5 років тому +1

      ​@@jakearchibald Full Stack Speaker, i guess :v ... Can you tell us what software do you use or how you create the animation, please?

    • @mreyybree
      @mreyybree 5 років тому +1

      @@rizaldywirawan He uses HTML+CSS+JS+SVG

  • @api-first
    @api-first 4 роки тому +118

    Jake is an amazing asset for the JS community!

    • @codeaperture
      @codeaperture 3 роки тому +1

      I always watch this when I feel " you don't know JavaScript yet,,"

  • @bg_x6558
    @bg_x6558 6 років тому +112

    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) ?

    • @DheerajBhaskar
      @DheerajBhaskar 5 років тому +11

      I'm also interested. I think he used HTML5 and js to make this

    • @ys5399
      @ys5399 5 років тому +3

      I think I know you from Columbus Ohio??

  • @SocksWithSandals
    @SocksWithSandals 5 років тому +2

    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.

  • @LichardD
    @LichardD 5 років тому +78

    Came here to learn about event loops.
    I now fear those who drink fizzy water.

  • @markovujanic
    @markovujanic 2 роки тому +1

    This video sits much better after third time 'through the loop'. Thanks Jake for creating it.

  • @bitbraindev
    @bitbraindev 8 місяців тому +1

    Jake reminds me a lot of Tom Scott. Great talk!

  • @mukeshsoni
    @mukeshsoni 6 років тому +1

    I was so stressed in the last 3-4 minutes looking at that guy standing besides Jake. I thought any second now he would pull the mic away from Jake and cuff him.
    side note - What a thoroughly enjoyable presentation 👏

    • @jakearchibald
      @jakearchibald 6 років тому +1

      Yeah, that was a bit weird. I told them in advance that I might run over ~4 mins. Although I really didn't notice them standing there.

  • @dacao9240
    @dacao9240 2 роки тому

    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.

  • @minercreepmc
    @minercreepmc 3 роки тому

    This is the best presentation so far i've seen from the badass talking and animation for slide, but sad for the dead crowd

  • @ashishshubham
    @ashishshubham 6 років тому +86

    I wish I learnt all my CS courses from you Jake.

  • @anjaliRaghavmgr8
    @anjaliRaghavmgr8 4 роки тому +10

    Loved the energy he brings to the talk. Informatively hilarious!

  • @justinhalsall4077
    @justinhalsall4077 6 років тому +7

    Love Jake's talks, always super solid, informative and even include some giggles from time to time!

  • @kieran2347
    @kieran2347 3 роки тому +8

    Thank you for explaining event loops for all of us 5-year-olds, Jake! You the best!

  • @JuanOrigami
    @JuanOrigami 5 років тому +5

    The piano chat part is totally relatable. When i do a talk in front of thousands of people I want to be as funny as this man

  • @indylawi5021
    @indylawi5021 5 років тому +11

    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.

  • @ashokethapay
    @ashokethapay Рік тому

    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!!!

  • @karadelamarck6576
    @karadelamarck6576 6 років тому +21

    Thank you for an excellent talk! Fascinating, especially regarding promises and microtasks and how the microtask queue must run to completion before the event loop can continue. Could I ask how callbacks and promises (both of which generate short-lived objects) are affected by, or affect, garbage collection? When the new space is full how does the V8 engine handle the 'stop the world' technique in relation to the event loop? Is there a potential for callbacks to be more performant regarding garbage collection vs promises?

  • @faceupanddown
    @faceupanddown 5 років тому +7

    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

  • @1kounter
    @1kounter 5 років тому +1

    clear and simple explanation for a beginner to get a grasp of what is going on under the hood, well done! Correct if I'm wrong but I think there is a mistake in the little exercise at 30:32 . It should be promise.then('Microtask 1') instead of promise.then('Listener 1') and same for number 2.

  • @XAbybai
    @XAbybai 6 років тому +11

    I repeat others, but I want to give the great thanks to that speaker. Very very nice talk about loop, promise, RAF and others tricky cases. Thanks you a lot!

  • @Pupu._
    @Pupu._ 2 роки тому +4

    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

  • @mr_ozio
    @mr_ozio 4 роки тому +1

    This is the must watch video before any js interview.

  • @c9988774455
    @c9988774455 6 років тому +13

    I never Heard about Microtasks even though I am using Promises, Great visual comparison between JSTasks, rAF and Microtasks. Awesome stuff Jake.

  • @thefuturejulio
    @thefuturejulio 6 років тому +114

    I feel like I just watched epic blockbuster with huge budget, Tom Cruise and stuff

  • @paavangupta3420
    @paavangupta3420 2 роки тому

    His way of explaining things with so much clarity and hilarious jokes in between, is on the next level 😂🙌 Amazing!

  • @afca25
    @afca25 2 роки тому

    That piano bit was straight up Larry David-esque humor and I loved it!

  • @Ashok-wc9be
    @Ashok-wc9be 4 роки тому +3

    This guy is super awesome and this talk is probably the best talk on the event-loop out there! Thanks a lot!

  • @johnlennon407
    @johnlennon407 Рік тому

    Wow, what a fantastic performance! Entertaining and informative, with deep philosophical thoughts like sneezing metaphor or orbits and sun animations. The lector is brilliant.

  • @dnav10
    @dnav10 5 років тому +5

    Didn't know anything about this. Now I feel like wanting to dig more into JavaScript

  • @shenoynishant
    @shenoynishant 6 років тому +14

    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 :)

  • @anirudhsreerambhatla6108
    @anirudhsreerambhatla6108 5 років тому

    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

    • @kf88743
      @kf88743 5 років тому

      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.

  • @AmandeepSingh-hd8iq
    @AmandeepSingh-hd8iq 5 років тому +6

    Now this is what you call a talk. Impeccable 👌

  • @MajorBreakfast
    @MajorBreakfast 6 років тому +36

    Thank you for including the part about microtasks! Very informative!

  • @nikosc
    @nikosc 4 роки тому +1

    Wow. After that talk I used many blogs and MDN docs to fully understand these topics.

  • @AmnonSadeh
    @AmnonSadeh 2 роки тому +1

    5:25 "Are the arguments in the wrong order?"
    No, because 'callback' is mandatory, but 'ms' is optional. This is valid JS: setTimeout(callback);

    • @jakearchibald
      @jakearchibald 2 роки тому +2

      True, but the API would be better if ms was not optional, and was the first parameter.

    • @DonaldFranciszekTusk
      @DonaldFranciszekTusk 8 місяців тому

      @@jakearchibaldWhy?

    • @jakearchibald
      @jakearchibald 8 місяців тому

      @@DonaldFranciszekTusk What's the benefit of ms being optional?

  • @shivam.mishra
    @shivam.mishra 4 роки тому +1

    Never had such a clear vision of the event loop. Thanks jake

  • @sgwatyt
    @sgwatyt 6 років тому +201

    The main Fred.

  • @MiltonSosa
    @MiltonSosa 6 років тому +1

    Amazing explanation on how event-loop, RAF and micro-tasks works!

  • @xingyuye0313
    @xingyuye0313 3 роки тому

    This is the best talk on the "event loop" I've ever seen!

  • @yongzeyao1337
    @yongzeyao1337 5 років тому +3

    I think I'm just gonna master JavaScript/TypeScript, Vue.js for now. As a developer, I personally think depth is much more important than breadth.

    • @afeez.awoyemi
      @afeez.awoyemi 5 років тому

      I love VueJS. And I think Javascript is pretty cool generally :)

  • @ananthakrishnanj729
    @ananthakrishnanj729 5 років тому +2

    Most informative and engaging talks on event loops! Kudos Jakes.

  • @Textras
    @Textras 6 років тому +6

    Superb talk Jake. As always!! Now time for a lime soda water.

  • @afca25
    @afca25 2 роки тому

    That's a tough crowd if i've ever seen one... My man is killing it there!!

  • @yonoseespanol
    @yonoseespanol 3 роки тому +2

    For those who find this incredibly interesting, Jake and Surma have a talk show called HTTP 203

  • @AhmadAwais
    @AhmadAwais 6 років тому +18

    Just like always, amazing presentation, especially when you magically swapped those lines around at 2:25 😲

  • @raymondyoo5461
    @raymondyoo5461 2 роки тому

    wow great lecture. Talking about deep and complex notions in such a concise tone, thanks for your great presentation

  • @juremd
    @juremd 4 роки тому

    Great explanation, though the description mentions bits about requestIdleCallback which I did not notice.

    • @jakearchibald
      @jakearchibald 4 роки тому +2

      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.

  • @smitthakkar9837
    @smitthakkar9837 Рік тому +1

    One of the best talks till date on event loop! Thanks a lot!

  • @dima9740
    @dima9740 6 років тому +1

    Oh my gosh, that's very simple, clear and informative. Great speaker, great presentation.

  • @pradeepbetty
    @pradeepbetty Рік тому

    Watching him is like watching myself in the mirror 😄
    it always bugged me how setTimeout's timeout is at the last,...

  • @cli23
    @cli23 3 роки тому

    Amazing talk in so many ways. Incredible speaker, slides and diagrams, and content.

  • @matanmizrahi2257
    @matanmizrahi2257 5 років тому

    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

  • @mweb7344
    @mweb7344 3 роки тому +2

    that looks and sounds like a real world Sheldon, Great talk !!

  • @NorthEagle
    @NorthEagle 5 років тому +2

    Why the F isn't this video watched 1 million times? This is amazingly informative and presented in a really really good way :-)

  • @s3340985
    @s3340985 3 роки тому +4

    Great humor, tough crowd :) But honestly, very informative, thank you!

  • @stackdeveloper6614
    @stackdeveloper6614 10 місяців тому

    My life as a developer changed after this talk!

  • @rpmarin8933
    @rpmarin8933 5 років тому +3

    This is a wonderful talk! A very illustrative and beautiful explanation of the javascript's internals. Do any of you know a talk about the internals of other languages like this ? Java? Python? PHP ?

  • @EduardoWeidmanBarijan
    @EduardoWeidmanBarijan 2 роки тому

    That was easy to follow even though I get stuck a lot when it comes to frontend programming. Good job.

  • @Gelio1234
    @Gelio1234 6 років тому +1

    What a great talk! So much useful information presented in a convenient and easy to understand way

  • @mryechkin
    @mryechkin 3 роки тому +1

    Man.. tough crowd! This was a great talk

  • @Lavasea
    @Lavasea 4 роки тому

    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.

  • @ShahriarAnwar
    @ShahriarAnwar 6 років тому +26

    Just AWESOME. Jake you're my man.

  • @havenoideawith
    @havenoideawith 6 років тому +4

    Love the main thread animation.☺️

  • @__azt
    @__azt 5 років тому +1

    Wow! That is one of the most informative talks I ever heard.

  • @RubenMiquelino
    @RubenMiquelino 3 роки тому +3

    fucking amazing. i wish every talker has this kind of humor

  • @jasonsebring3983
    @jasonsebring3983 5 років тому +1

    I feel like I just started learning this stuff and I've been doing it for so long. Amazing!

  • @feihcsim7045
    @feihcsim7045 6 років тому +5

    my man jake killing it again

  • @xpkareem
    @xpkareem 2 роки тому

    I disagree about fizzy water, but this is a fantastic talk. Thanks!

  • @waldemarenns4874
    @waldemarenns4874 3 роки тому +1

    A classical Archibald. Great talk!

  • @KaranSheth
    @KaranSheth 4 роки тому

    This is so good! Its like Simon Amstell coming to teach me about javascript stuff!

  • @EduardoRFS
    @EduardoRFS 5 років тому +2

    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

  • @xerxius5446
    @xerxius5446 5 років тому +11

    Finally, a JS expert with a sense of humor !

  • @bonehelm
    @bonehelm 3 роки тому

    Great talk, but now I realize why JS in the browser is so frustrating to deal with.

  • @hatifnatt57
    @hatifnatt57 2 роки тому

    Jesus Christ burst out laughing on that prolonged sneeze analogy, happens rarely for me

  • @nvrp
    @nvrp Рік тому

    Please add Laughter Tracks!
    I stress when good jokes arent rewarded with good laughter!
    "I stress about things that arent really problems.
    I stress about things that have nothing to do with me"

  • @JulianSloman
    @JulianSloman 6 років тому +2

    That laughter at the end "back to the studio" :D

  • @mr_ozio
    @mr_ozio 4 роки тому

    My gosh, the only presentation where I had to set playback speed to lower value.

  • @Retrofire-47
    @Retrofire-47 2 роки тому

    23:38 fyi this is not a bug, it is a hardware limitation. the browser cannot predict when the monitor is going to refresh, in order to do that it would need to accurately predict quantum mechanics. the paint event occurring AFTER the monitor refreshes means absolutely nothing because the monitor has already refreshed.. when rAF executes its callback that can only happen after the OS detects that the monitor has refreshed aka you will need to wait until the next frame refresh for paint regardless, whether the paint event is before or after makes no difference, you will always experience up to 33.2ms of measurable input lag.. unless you incorporate some kind of unique predictive technology to predict when the monitor will refresh THEN update the appropriate data to change rasterization, but that is subject to error

  • @SafetyLast-_-
    @SafetyLast-_- 2 роки тому

    The best explanation of the Event Loop out there 👍

  • @AgingAeroplanes
    @AgingAeroplanes 2 роки тому +1

    When Jeremy from Peep Show finally gets his act together.

  • @xyzing99
    @xyzing99 Рік тому

    This is the best video explaining event loop. However, some code in this video do not run as expect. Maybe browser adjust some strategy I guess. My chrome version is 116.

  • @christiansmitherman
    @christiansmitherman 2 роки тому +5

    Who else was sent here by Fireship??

  • @תומררונן-ר7ל
    @תומררונן-ר7ל 3 роки тому

    Amazing video. You make the subject very clear

  • @rembautimes8808
    @rembautimes8808 3 роки тому

    Great talk. If there ever was Javascript Jeopardy ..