100 comments on “Jake Archibald: In The Loop – JSConf.Asia

  1. I was testing the cat gif while loop page Jake did the demo of : http://event-loop-tests.glitch.me/while-true-test.html
    But I am unable to see the GIF being stopped. For me in Chrome the GIF seems to play fine even after clicking the button.

    Edit: In Safari the GIF will stop

  2. Refer to this article to understand microtask queue. It has good animated stuff which might help: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

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

  4. Thanks for such an amazing talk !!

    At 32:01, Did not understand how the listener 2 can execute while the stack is not empty ? The callbacks in the tasks queue run only when the JS stack is empty right ?

  5. Great talk, watched several times. I'm wondering if anyone else has had trouble recreating the cat gif animation stop because of blocking code. Simple event listener with while true evaluating inside of it. But it doesn't seem to pause the gif I have in my html

  6. The Edge + Safari thing you said at 23:30 , I've been trying to fix a bug with something flickering only in edge/safari, thanks πŸ˜›

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

  8. 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 πŸ™‚

  9. 31:29 So how can we reliably simulate user interactions with or without JS? Are there any standard approaches for testing such cases?

  10. I'm confused – according to the video, any visual changes happen after a js script was finished. But how does this work – you can simply add an element to the DOM and then change it's text and then simply measure it using simple synchronous js script. Without waiting for a re-rendering. This broke my head… – https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/5047712#5047712.

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

  12. Example at 22:13 with 2 requestAnimationFrame doesn't work for me, neither did getComputedStyled(box). Anyone had this problem? Tested on chrome 71.0.3578.98

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

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

  15. 25:00
    I had this workaround pop into mind:
    function onNodeInsert() {
    elem.removeEventListener("DOMNodeInserted", onNodeInsert);
    requestAnimationFrame(() => elem.addEventListener("DOMNodeInserted", onNodeInsert));
    console.log("DOM Node inserted !");

  16. I learned a lot about the event loop from this. Very good explanation. On a side note: I too have a slight distrust of those who claim to like soda water. I don't get it and my mouth finds it very offensive.

  17. Amazing presentation! I loved the visuals and the concise explanations. Does anyone know the presentation software used? It would be pretty impressive if that was a PowerPoint slide deck.

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

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

  20. Why the F isn't this video watched 1 million times? This is amazingly informative and presented in a really really good way πŸ™‚

  21. Something just confused me on the diagram. I tried doing 2 AJAX requests, one which takes 5 secs to respond and 1 which takes 1 sec. However I can make multiple requests while the 5 second one is still processing. How come it seemed like it wasn't queued at all?

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

  23. @4:08 Human beings are just like JavaScript, single-threaded and event loop(ed)!
    Yes, that is correct. Human beings are not multi-threaded. Even when we see from two eyes, we are not seeing it thru two eyes simultaneously, we see from one eye once and then from the second eye, and the same goes with all senses.
    (To prove it: And that is how the 3-D glasses work, they work on more than 200Hz refresh rate of TV panels where the 3-D glass switch between 2 lenses in 100Hz frequency) and this is how you see 3-D happening!

  24. I've long wanted to name the entity that selected threads then instructions. Within a thread it is an instruction pointer. I was thinking to call them 'Gremlin'. Wish JS would give us more than one Gremlin. Though seeing your diagrams perhaps 'Pacman' would be better than either a square box or a Gremlin.

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

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

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

  28. This is awesome!. One question, what about observables and subscriptions?. Are there on the task or microtasks queue?

  29. 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 ?

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

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

  32. did anyone notice that the position of a style.transition line ruins that code 22:12 ? or i missed something? https://jsfiddle.net/maxsinev/45nybc0x/

Leave a Reply

Your email address will not be published. Required fields are marked *