Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Loop into the Javascript Event Loop - JavaScript Israel Meetup

Loop into the Javascript Event Loop - JavaScript Israel Meetup

This short talk will explain how javascript handles being both single-threaded and non-blocking. We'll demystify the "Event Loop" and how concurrency works in javascript. If a coworker ever helped you solve a bug by wrapping a function with a `setTimeout(myFunc, 0)` and you felt cheated, this talk is definitely for you.

Presented at http://www.meetup.com/JavaScript-Israel/events/229643120/

940e4866e4f95fbabbe5334d0a4a0de1?s=128

cowchimp

March 30, 2016
Tweet

Transcript

  1. Loop into the Javascript Event Loop

  2. Yonatan Mevorach blog.cowchimp.com github.com/cowchimp @cowchimp

  3. Javascript is single-threaded No race conditions, No locks. This is

    the life!
  4. Javascript is blocking for (var i = 0; i <

    10000000; i++) { }; var now = new Date().getTime(); while (new Date().getTime() < now + 10000) { }
  5. js is blocking, everything else isn’t Ajax! Animations! Timeouts! User

    interactions!
  6. Technically…

  7. Callbacks

  8. Javascript Runtime Source: MDN Concurrency model and Event Loop

  9. Javascript Runtime Ajax

  10. Javascript Runtime Ajax result

  11. Javascript Runtime Ajax callback

  12. Javascript Runtime

  13. The Event Loop while (queue.waitForMessage()) { queue.processNextMessage(); }

  14. Can js operations be non-blocking? [ , , ] ,

    , , , , , , , , , , [ , , ] , , , , , , , , , , ,
  15. function chunk(array, process, context) { var items = array.concat(); //clone

    the array setTimeout(function () { var item = items.shift(); process.call(context, item); if (items.length > 0) { setTimeout(arguments.callee, 100); } }, 100); } Source: Nicholas C. Zakas' "Timed array processing in JavaScript" `setTimeout` to the resuce
  16. setTimeout(myFunc, 0); “Asyncify”™ sync operations

  17. setTimeout(myFunc, 0); “Asyncify”™ sync operations setImmediate(myFunc); DEMO

  18. setTimeout(myFunc, 0); “Asyncify”™ sync operations requestAnimationFrame(myFunc); requestIdleCallback(myFunc); process.nextTick(myFunc); window.addEventListener("message", myFunc);

    setImmediate(myFunc); Promise.resolve().then(myFunc); https://github.com/YuzuJS/setImmediate
  19. setTimeout(function () { console.log('hello'); }, 0); ['world'].forEach(function (str) { console.log(str);

    }); console.log('!'); Quiz time
  20. console.log('script start'); setTimeout(function () { console.log('setTimeout'); }, 0); Promise.resolve().then(function ()

    { console.log('promise1'); }).then(function () { console.log('promise2'); }); console.log('script end'); Quiz time # 2 Source: Jake Archibald‘s "Tasks, microtasks, queues and schedules"
  21. Web Workers var myWorker = new Worker('worker.js');

  22. What about node.js?

  23. • What the heck is the event loop anyway? •

    Writing a Non-blocking JavaScript Quicksort • The case for setImmediate() • Dissecting the HTML 5 Event Loop - Loops, Task Queues and Tasks • The Basics of Web Workers Further reading
  24. blog.cowchimp.com @cowchimp yonatan@sears.co.il Questions? Yonatan Mevorach