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

Ғылым және технология

"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.

Пікірлер: 527

  • @The9TKitsune
    @The9TKitsune5 жыл бұрын

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

  • @eritreanism

    @eritreanism

    4 жыл бұрын

    on point :)

  • @oleksii208

    @oleksii208

    4 жыл бұрын

    hahahahah

  • @markmhaslam

    @markmhaslam

    4 жыл бұрын

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

  • @LethiuxX

    @LethiuxX

    3 жыл бұрын

    Comedy is his hobby, it seems.

  • @perfect.stealth

    @perfect.stealth

    3 жыл бұрын

    Lmao

  • @ronniesunshine1163
    @ronniesunshine11633 жыл бұрын

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

  • @ReachByteBurst

    @ReachByteBurst

    2 жыл бұрын

    true

  • @stefanplusplus917

    @stefanplusplus917

    2 жыл бұрын

    what do yo mean with tough crowd?

  • @andy_lamax

    @andy_lamax

    2 жыл бұрын

    I agree. This was a tough crowd

  • @bro...5849

    @bro...5849

    Жыл бұрын

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

  • @TheMandySpace

    @TheMandySpace

    Жыл бұрын

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

  • @buddhaburrito
    @buddhaburrito3 жыл бұрын

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

  • @anonwithamnesia
    @anonwithamnesia4 жыл бұрын

    Who is here because of Fireship?

  • @starhopper4587

    @starhopper4587

    4 жыл бұрын

    🙋🏻‍♀️🔥

  • @shimin_mathew

    @shimin_mathew

    4 жыл бұрын

    Me me 🤗🤗

  • @herohamp2

    @herohamp2

    4 жыл бұрын

    Hola

  • @mykhailomikhnovych8303

    @mykhailomikhnovych8303

    4 жыл бұрын

    yup :)

  • @AmanNidhi

    @AmanNidhi

    4 жыл бұрын

    me during may lockdown covid

  • @Nyromancer
    @Nyromancer6 жыл бұрын

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

  • @jakearchibald

    @jakearchibald

    6 жыл бұрын

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

  • @JAlexanderCurtis

    @JAlexanderCurtis

    5 жыл бұрын

    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 жыл бұрын

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

  • @utsavprabhakar5072

    @utsavprabhakar5072

    5 жыл бұрын

    @@jakearchibald Thanks for this !

  • @erikachurchman9417

    @erikachurchman9417

    4 жыл бұрын

    wow

  • @vishnusingh4118
    @vishnusingh41184 жыл бұрын

    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 )

  • @herzallahaymen5478

    @herzallahaymen5478

    Жыл бұрын

    give us a smmary of the jokes

  • @SamiullahKhan
    @SamiullahKhan6 жыл бұрын

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

  • @dakedres
    @dakedres4 жыл бұрын

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

  • @JaLikon65
    @JaLikon6511 ай бұрын

    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.

  • @DonaldFranciszekTusk

    @DonaldFranciszekTusk

    2 ай бұрын

    Robbers' talk was better.

  • @atticoos
    @atticoos6 жыл бұрын

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

  • @benoitleger-derville4162
    @benoitleger-derville41626 жыл бұрын

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

  • @dinub8414

    @dinub8414

    6 жыл бұрын

    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: kzread.info/dash/bejne/apV7yryKm9KskrQ.html

  • @LichardD
    @LichardD4 жыл бұрын

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

  • @maximlyakhov967
    @maximlyakhov9672 жыл бұрын

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

  • @justinhalsall4077
    @justinhalsall40776 жыл бұрын

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

  • @InternetTips_bb
    @InternetTips_bb4 жыл бұрын

    Jake is an amazing asset for the JS community!

  • @codeaperture

    @codeaperture

    3 жыл бұрын

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

  • @ananthakrishnanj729
    @ananthakrishnanj7295 жыл бұрын

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

  • @anjaliRaghavmgr8
    @anjaliRaghavmgr84 жыл бұрын

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

  • @Ashok-wc9be
    @Ashok-wc9be4 жыл бұрын

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

  • @indylawi5021
    @indylawi50214 жыл бұрын

    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.

  • @XAbybai
    @XAbybai6 жыл бұрын

    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 жыл бұрын

    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

  • @markovujanic
    @markovujanic Жыл бұрын

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

  • @ashishshubham
    @ashishshubham5 жыл бұрын

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

  • @thefuturejulio
    @thefuturejulio5 жыл бұрын

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

  • @faceupanddown

    @faceupanddown

    5 жыл бұрын

    Same!

  • @c9988774455
    @c99887744556 жыл бұрын

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

  • @ashokethapay
    @ashokethapay8 ай бұрын

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

  • @jlyunior
    @jlyunior2 жыл бұрын

    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

  • @MiltonSosa
    @MiltonSosa6 жыл бұрын

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

  • @kieran2347
    @kieran23473 жыл бұрын

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

  • @karadelamarck6576
    @karadelamarck65766 жыл бұрын

    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?

  • @AmandeepSingh-hd8iq
    @AmandeepSingh-hd8iq5 жыл бұрын

    Now this is what you call a talk. Impeccable 👌

  • @MajorBreakfast
    @MajorBreakfast6 жыл бұрын

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

  • @faceupanddown
    @faceupanddown5 жыл бұрын

    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

  • @paavangupta3420
    @paavangupta34202 жыл бұрын

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

  • @bg_x6558
    @bg_x65585 жыл бұрын

    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 жыл бұрын

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

  • @ys5399

    @ys5399

    5 жыл бұрын

    I think I know you from Columbus Ohio??

  • @smitthakkar9837
    @smitthakkar9837 Жыл бұрын

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

  • @mattscheurich1037
    @mattscheurich10375 жыл бұрын

    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 жыл бұрын

    I do all my own stunts

  • @rizaldywirawan

    @rizaldywirawan

    4 жыл бұрын

    ​@@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

    4 жыл бұрын

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

  • @dima9740
    @dima97406 жыл бұрын

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

  • @cli23
    @cli233 жыл бұрын

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

  • @xingyuye0313
    @xingyuye03132 жыл бұрын

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

  • @shivam.mishra
    @shivam.mishra3 жыл бұрын

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

  • @raymondyoo5461
    @raymondyoo5461 Жыл бұрын

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

  • @mr_ozio
    @mr_ozio3 жыл бұрын

    This is the must watch video before any js interview.

  • @JuanOrigami
    @JuanOrigami5 жыл бұрын

    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

  • @__azt
    @__azt5 жыл бұрын

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

  • @Textras
    @Textras6 жыл бұрын

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

  • @Gelio1234
    @Gelio12346 жыл бұрын

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

  • @jasonsebring3983
    @jasonsebring39835 жыл бұрын

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

  • @sgwatyt
    @sgwatyt6 жыл бұрын

    The main Fred.

  • @jakearchibald

    @jakearchibald

    5 жыл бұрын

    I find it very difficult to discuss the movie Thor.

  • @omarflores4234

    @omarflores4234

    5 жыл бұрын

    i cannot unhear this hahaha

  • @hobbyturystaSEO

    @hobbyturystaSEO

    4 жыл бұрын

    :D

  • @tinpham6413
    @tinpham64132 жыл бұрын

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

  • @shenoynishant
    @shenoynishant5 жыл бұрын

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

  • @SocksWithSandals
    @SocksWithSandals4 жыл бұрын

    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.

  • @dacao9240
    @dacao9240 Жыл бұрын

    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.

  • @johnlennon407
    @johnlennon4077 ай бұрын

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

  • @sudeep.g
    @sudeep.g4 жыл бұрын

    One of the best talks I have ever seen!

  • @dnav10
    @dnav105 жыл бұрын

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

  • @maximofernandez196
    @maximofernandez196 Жыл бұрын

    "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

  • @ShahriarAnwar
    @ShahriarAnwar6 жыл бұрын

    Just AWESOME. Jake you're my man.

  • @Imsganesh
    @Imsganesh6 жыл бұрын

    Great talk. Elegant and simple explanation!! 👏👏

  • @shikharchaudhary6984
    @shikharchaudhary69845 жыл бұрын

    Amazing talk. Cleared my concepts. Good Job !

  • @SafetyLast-_-
    @SafetyLast-_-2 жыл бұрын

    The best explanation of the Event Loop out there 👍

  • @1kounter
    @1kounter5 жыл бұрын

    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.

  • @promatik
    @promatik5 жыл бұрын

    What a great feeling, just learned awesome stuff. Thanks!

  • @user-db2bl1oj1v
    @user-db2bl1oj1v3 жыл бұрын

    Amazing video. You make the subject very clear

  • @feihcsim7045
    @feihcsim70456 жыл бұрын

    my man jake killing it again

  • @norwen
    @norwen4 жыл бұрын

    Thank you for this amazing talk! Whole new world :)

  • @AhmadAwais
    @AhmadAwais6 жыл бұрын

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

  • @fadedlama

    @fadedlama

    3 жыл бұрын

    nani?!

  • @amanmavai99
    @amanmavai996 ай бұрын

    one of the best talks I have ever seen. !!

  • @anirudhsreerambhatla6108
    @anirudhsreerambhatla61084 жыл бұрын

    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

    4 жыл бұрын

    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.

  • @Munchyydl
    @Munchyydl6 жыл бұрын

    Great visual explanation of the event loop! :)

  • @NorthEagle
    @NorthEagle5 жыл бұрын

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

  • @sujitkumarsingh3200

    @sujitkumarsingh3200

    5 жыл бұрын

    Very few people are capable of understanding this.

  • @nikosc
    @nikosc4 жыл бұрын

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

  • @rpmarin8933
    @rpmarin89334 жыл бұрын

    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 ?

  • @Lavasea
    @Lavasea4 жыл бұрын

    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.

  • @havenoideawith
    @havenoideawith6 жыл бұрын

    Love the main thread animation.☺️

  • @KaranSheth
    @KaranSheth3 жыл бұрын

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

  • @saurabhmehta7681
    @saurabhmehta76814 жыл бұрын

    Great talk! And his level of understanding is inspirational

  • @EduardoWeidmanBarijan
    @EduardoWeidmanBarijan Жыл бұрын

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

  • @mryechkin
    @mryechkin3 жыл бұрын

    Man.. tough crowd! This was a great talk

  • @nukebarbarbarian3735
    @nukebarbarbarian37359 ай бұрын

    This is the best video on event loop so clear!

  • @danieltroger1761
    @danieltroger1761 Жыл бұрын

    This talk was SOOO GOOOd. TYSM 🙏

  • @MerrStudio
    @MerrStudio Жыл бұрын

    I love this talk, great job

  • @Manish_Singh_Chauhan
    @Manish_Singh_Chauhan6 жыл бұрын

    Awsmeeeee JAKE! Thank you! :)

  • @mr.fishfish570
    @mr.fishfish570 Жыл бұрын

    Thank you very much for doing this presentation!

  • @zubinix
    @zubinix3 жыл бұрын

    Great explanation. Thanks Jake.

  • @waldemarenns4874
    @waldemarenns48743 жыл бұрын

    A classical Archibald. Great talk!

  • @dattugaade
    @dattugaade5 жыл бұрын

    It's very informative. Thanks Jake.

  • @JulianSloman
    @JulianSloman5 жыл бұрын

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

  • @stackdeveloper6614
    @stackdeveloper66145 ай бұрын

    My life as a developer changed after this talk!

  • @afca25
    @afca252 жыл бұрын

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

  • @s3340985
    @s33409853 жыл бұрын

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

  • @PaulShmaul
    @PaulShmaul2 жыл бұрын

    Best explanation of event loop, indeed

  • @gabrielt6756
    @gabrielt6756 Жыл бұрын

    Beautiful talk! 🙏🏻

  • @EduardoRFS
    @EduardoRFS5 жыл бұрын

    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

  • @NIKHILKOMMURI
    @NIKHILKOMMURI3 жыл бұрын

    Excellent Talk :), Thank you so much for this

  • @herozero777
    @herozero7778 ай бұрын

    Yup this is really helpful, thanks for this awesome talk.

  • @HarshSingh-hk8fe
    @HarshSingh-hk8fe2 жыл бұрын

    this is the best explanation of even loops

  • @abdulnaveed4984
    @abdulnaveed49845 жыл бұрын

    awesome explanation sir great, really love to listen you

  • @xerxius5446
    @xerxius54464 жыл бұрын

    Finally, a JS expert with a sense of humor !

  • @juremd
    @juremd3 жыл бұрын

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

  • @jakearchibald

    @jakearchibald

    3 жыл бұрын

    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.

Келесі