Working with single-threaded event loop

meet.js summit 2014 (http://summit.meetjs.pl/2014/). Video: https://vimeo.com/111284724

Transcript

1. @mthenw Senior UI Developer at Egnyte
2. Working with single-threaded event loop
4. synchronous processes threads event loop
5. event loop no race conditions good for I/O bound tasks most web apps bad for CPU intensive tasks
6. there is a need to handle a lot of “events”
7. Callback queue Stack Heap V8 Event loop Web APIs DOM XMLHttpRequest WindowTimers …
8. Callback queue Stack Heap V8 Event loop Node.js API Process … HTTP
9. it’s good for both frontend and backend
10. Stack Heap V8
11. Stack Heap V8
12. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          console.log(sum);   }   ! logSum(1,  2);
13. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2)
14. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b)
15. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b) a  +  b
16. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);  -­‐>  3          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b)
17. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);  -­‐>  3          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2)
18. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);  -­‐>  3          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2) console.log(sum)
19. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);  -­‐>  3          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2)
20. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);  -­‐>  3          console.log(sum);   }   ! logSum(1,  2);
22. asynchronous
23. event loop & callback queue
24. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); Node.js APIs Call stack
25. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); logSum(1,  2) Node.js APIs Call stack
26. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b) Node.js APIs Call stack
27. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b) a  +  b Node.js APIs Call stack
28. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b) Node.js APIs Call stack
29. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); logSum(1,  2) setTimeout(func) Node.js APIs Call stack
30. after 10 milliseconds
31. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); anonymous  func Node.js APIs Call stack
32. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); anonymous  func Node.js APIs Call stack
33. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); anonymous  func console.log(sum) Node.js APIs Call stack
34. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); anonymous  func Node.js APIs Call stack
35. function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); Node.js APIs Call stack
36. real application no single message queue
37. setTimeout callbacks
 setInterval callbacks I/O callbacks setImmediate callbacks update timers
38. setInterval! setTimeout preserved order they are not accurate
39. setTimeout(function()  {      console.log(‘callback  1')   },  0);   ! setTimeout(function()  {      console.log('callback  2')   },  0);
40. setImmediate IE10 & node.js preserved order once per loop iteration
41. setImmediate more accurate that setTimeout(fn, 0) because no timers involved
42. setTimeout(function()  {      console.log('setTimeout  callback')   },  0);   ! setImmediate(function()  {      console.log('setImmediate  callback')   }); setImmediate  callback   setTimeout  callback
43. setImmediate always after I/O events callbacks always before timers break up long running operations
44. process.nextTick node.js
45. run after all currently running synchronous operations before any other I/O events fire
46. setTimeout callbacks
 setInterval callbacks I/O callbacks setImmediate callbacks update timers process.nextTick callbacks process.nextTick callbacks process.nextTick callbacks
47. function  MyThing(options)  {      this.setupOptions(options);   !    process.nextTick(function()  {          this.startDoingStuff();      }.bind(this));   }   ! var  thing  =  new  MyThing();   thing.getReadyForStuff();   ! //  thing.startDoingStuff()  gets  called  now,     //  not  before.
48. function  definitelyAsync(arg,  cb)  {      if  (arg)  {          process.nextTick(cb);          return;      }   !    fs.stat('file',  cb);   }
49. setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback’);      },  0)   },  0);
50. setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback’);      },  0)   },  0);
51. setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback’);      },  0)   },  0);
52. setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback’);      },  0)   },  0);
53. setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback');      },  0)   },  0);
54. setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback');      },  0)   },  0);
55. setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback');      },  0)   },  0);
56. setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback');      },  0)   },  0);
57. process.nextTick can block event queue process.maxTickDepth
58. setTimeout callbacks
 setInterval callbacks I/O callbacks setImmediate callbacks update timers process.nextTick callbacks process.nextTick callbacks process.nextTick callbacks
59. Thanks!