Тёмный

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

JSConf
Подписаться 277 тыс.
Просмотров 723 тыс.
50% 1

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

Наука

Опубликовано:

 

8 фев 2018

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 527   
@The9TKitsune
@The9TKitsune 5 лет назад
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
@ronniesunshine1163 3 года назад
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 2 года назад
@@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
@anonwithamnesia
@anonwithamnesia 4 года назад
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
@buddhaburrito
@buddhaburrito 3 года назад
Jake is a truly genius presenter, sliding in jokes in between heavy subjects (like microtasks) so that audience can take mental rests
@Nyromancer
@Nyromancer 6 лет назад
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
@JaLikon65
@JaLikon65 11 месяцев назад
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 3 месяца назад
Robbers' talk was better.
@vishnusingh4118
@vishnusingh4118 4 года назад
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
@dakedres
@dakedres 4 года назад
I love how it feels like he's going on completely unrelated tangents but it always seemlessly transitions back into the main idea
@SamiullahKhan
@SamiullahKhan 6 лет назад
He really hit the core of the event loop. Something that is so important to get hold of tasks, micro tasks.
@LichardD
@LichardD 5 лет назад
Came here to learn about event loops. I now fear those who drink fizzy water.
@atticoos
@atticoos 6 лет назад
Hot damn, Jake.. this is one of the best talks I've seen. Well done.
@benoitleger-derville4162
@benoitleger-derville4162 6 лет назад
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8aGhZQkoFbQ.html
@finally_code
@finally_code 4 года назад
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,,"
@maximlyakhov967
@maximlyakhov967 2 года назад
This is the best event loop talk on YT. Well balanced mental load / mental rest. Thank you, Jake!
@justinhalsall4077
@justinhalsall4077 6 лет назад
Love Jake's talks, always super solid, informative and even include some giggles from time to time!
@anjaliRaghavmgr8
@anjaliRaghavmgr8 4 года назад
Loved the energy he brings to the talk. Informatively hilarious!
@ananthakrishnanj729
@ananthakrishnanj729 5 лет назад
Most informative and engaging talks on event loops! Kudos Jakes.
@XAbybai
@XAbybai 6 лет назад
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!
@AmandeepSingh-hd8iq
@AmandeepSingh-hd8iq 5 лет назад
Now this is what you call a talk. Impeccable 👌
@Ashok-wc9be
@Ashok-wc9be 4 года назад
This guy is super awesome and this talk is probably the best talk on the event-loop out there! Thanks a lot!
@markovujanic
@markovujanic Год назад
This video sits much better after third time 'through the loop'. Thanks Jake for creating it.
@ashishshubham
@ashishshubham 5 лет назад
I wish I learnt all my CS courses from you Jake.
@MiltonSosa
@MiltonSosa 6 лет назад
Amazing explanation on how event-loop, RAF and micro-tasks works!
@jlyunior
@jlyunior 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
@smitthakkar9837
@smitthakkar9837 Год назад
One of the best talks till date on event loop! Thanks a lot!
@kieran2347
@kieran2347 3 года назад
Thank you for explaining event loops for all of us 5-year-olds, Jake! You the best!
@MajorBreakfast
@MajorBreakfast 6 лет назад
Thank you for including the part about microtasks! Very informative!
@dima9740
@dima9740 6 лет назад
Oh my gosh, that's very simple, clear and informative. Great speaker, great presentation.
@xingyuye0313
@xingyuye0313 2 года назад
This is the best talk on the "event loop" I've ever seen!
@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
@paavangupta3420
@paavangupta3420 2 года назад
His way of explaining things with so much clarity and hilarious jokes in between, is on the next level 😂🙌 Amazing!
@JuanOrigami
@JuanOrigami 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
@ashokethapay
@ashokethapay 9 месяцев назад
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!!!
@shivam.mishra
@shivam.mishra 3 года назад
Never had such a clear vision of the event loop. Thanks jake
@indylawi5021
@indylawi5021 4 года назад
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.
@c9988774455
@c9988774455 6 лет назад
I never Heard about Microtasks even though I am using Promises, Great visual comparison between JSTasks, rAF and Microtasks. Awesome stuff Jake.
@mr_ozio
@mr_ozio 3 года назад
This is the must watch video before any js interview.
@cli23
@cli23 3 года назад
Amazing talk in so many ways. Incredible speaker, slides and diagrams, and content.
@__azt
@__azt 5 лет назад
Wow! That is one of the most informative talks I ever heard.
@sudeep.g
@sudeep.g 4 года назад
One of the best talks I have ever seen!
@Gelio1234
@Gelio1234 6 лет назад
What a great talk! So much useful information presented in a convenient and easy to understand way
@jasonsebring3983
@jasonsebring3983 5 лет назад
I feel like I just started learning this stuff and I've been doing it for so long. Amazing!
@mattscheurich1037
@mattscheurich1037 5 лет назад
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 5 лет назад
​@@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
@raymondyoo5461
@raymondyoo5461 Год назад
wow great lecture. Talking about deep and complex notions in such a concise tone, thanks for your great presentation
@thefuturejulio
@thefuturejulio 5 лет назад
I feel like I just watched epic blockbuster with huge budget, Tom Cruise and stuff
@faceupanddown
@faceupanddown 5 лет назад
Same!
@Textras
@Textras 6 лет назад
Superb talk Jake. As always!! Now time for a lime soda water.
@amanmavai99
@amanmavai99 7 месяцев назад
one of the best talks I have ever seen. !!
@feihcsim7045
@feihcsim7045 6 лет назад
my man jake killing it again
@faceupanddown
@faceupanddown 5 лет назад
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
@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
@ShahriarAnwar 6 лет назад
Just AWESOME. Jake you're my man.
@SafetyLast-_-
@SafetyLast-_- 2 года назад
The best explanation of the Event Loop out there 👍
@norwen
@norwen 4 года назад
Thank you for this amazing talk! Whole new world :)
@tinpham6413
@tinpham6413 2 года назад
This is the best presentation so far i've seen from the badass talking and animation for slide, but sad for the dead crowd
@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.
@bg_x6558
@bg_x6558 5 лет назад
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??
@Imsganesh
@Imsganesh 6 лет назад
Great talk. Elegant and simple explanation!! 👏👏
@shikharchaudhary6984
@shikharchaudhary6984 5 лет назад
Amazing talk. Cleared my concepts. Good Job !
@johnlennon407
@johnlennon407 7 месяцев назад
Wow, what a fantastic performance! Entertaining and informative, with deep philosophical thoughts like sneezing metaphor or orbits and sun animations. The lector is brilliant.
@SocksWithSandals
@SocksWithSandals 4 года назад
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.
@saurabhmehta7681
@saurabhmehta7681 4 года назад
Great talk! And his level of understanding is inspirational
@user-db2bl1oj1v
@user-db2bl1oj1v 3 года назад
Amazing video. You make the subject very clear
@promatik
@promatik 5 лет назад
What a great feeling, just learned awesome stuff. Thanks!
@danieltroger1761
@danieltroger1761 Год назад
This talk was SOOO GOOOd. TYSM 🙏
@stackdeveloper6614
@stackdeveloper6614 5 месяцев назад
My life as a developer changed after this talk!
@mr.fishfish570
@mr.fishfish570 Год назад
Thank you very much for doing this presentation!
@dnav10
@dnav10 5 лет назад
Didn't know anything about this. Now I feel like wanting to dig more into JavaScript
@shizueigaki702
@shizueigaki702 6 месяцев назад
Absolute legend, this man.
@shenoynishant
@shenoynishant 5 лет назад
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 :)
@shuvenduoffline
@shuvenduoffline Год назад
Best explanation you can find
@nukebarbarbarian3735
@nukebarbarbarian3735 9 месяцев назад
This is the best video on event loop so clear!
@havenoideawith
@havenoideawith 6 лет назад
Love the main thread animation.☺️
@sgwatyt
@sgwatyt 6 лет назад
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
@MerrStudio
@MerrStudio Год назад
I love this talk, great job
@herozero777
@herozero777 8 месяцев назад
Yup this is really helpful, thanks for this awesome talk.
@PaulShmaul
@PaulShmaul 2 года назад
Best explanation of event loop, indeed
@Munchyydl
@Munchyydl 6 лет назад
Great visual explanation of the event loop! :)
@nikosc
@nikosc 4 года назад
Wow. After that talk I used many blogs and MDN docs to fully understand these topics.
@HarshSingh-hk8fe
@HarshSingh-hk8fe 3 года назад
this is the best explanation of even loops
@afca25
@afca25 2 года назад
That's a tough crowd if i've ever seen one... My man is killing it there!!
@karadelamarck6576
@karadelamarck6576 6 лет назад
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?
@jomgranade8764
@jomgranade8764 4 месяца назад
Thank you for this! This will help me in my reactjs development!
@KaranSheth
@KaranSheth 3 года назад
This is so good! Its like Simon Amstell coming to teach me about javascript stuff!
@waldemarenns4874
@waldemarenns4874 3 года назад
A classical Archibald. Great talk!
@mryechkin
@mryechkin 3 года назад
Man.. tough crowd! This was a great talk
@EduardoWeidmanBarijan
@EduardoWeidmanBarijan Год назад
That was easy to follow even though I get stuck a lot when it comes to frontend programming. Good job.
@anirudhsreerambhatla6108
@anirudhsreerambhatla6108 4 года назад
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.
@NorthEagle
@NorthEagle 5 лет назад
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.
@dattugaade
@dattugaade 5 лет назад
It's very informative. Thanks Jake.
@AhmadAwais
@AhmadAwais 6 лет назад
Just like always, amazing presentation, especially when you magically swapped those lines around at 2:25 😲
@fadedlama
@fadedlama 3 года назад
nani?!
@user-rz7kz7qv8z
@user-rz7kz7qv8z 10 месяцев назад
this is awesome, really well explained.
@zubinix
@zubinix 3 года назад
Great explanation. Thanks Jake.
@NIKHILKOMMURI
@NIKHILKOMMURI 3 года назад
Excellent Talk :), Thank you so much for this
@anand_maurya
@anand_maurya 3 года назад
The most wholesome video I saw today.
@preetikharb8283
@preetikharb8283 4 года назад
This video just made my day!!
@s3340985
@s3340985 3 года назад
Great humor, tough crowd :) But honestly, very informative, thank you!
@dasten123
@dasten123 5 лет назад
What an excellent talk!!
@JulianSloman
@JulianSloman 5 лет назад
That laughter at the end "back to the studio" :D
@SoreBrain
@SoreBrain 2 года назад
This was mind blowing
@driziiD
@driziiD 3 года назад
brilliant talk
Далее
АСЛАН, АВИ, АНЯ
00:12
Просмотров 782 тыс.
These coding projects give you an unfair advantage
8:13
The Async Await Episode I Promised
12:04
Просмотров 1,1 млн
The ARCH LINUX Experience
34:30
Просмотров 52 тыс.
The mind behind Linux | Linus Torvalds | TED
21:31
#miniphone
0:16
Просмотров 3,6 млн
#miniphone
0:16
Просмотров 3,6 млн