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

Working with single-threaded event loop

5ff4f1dbfd3888fba963ec7cc629e6f3?s=47 mthenw
September 27, 2014

Working with single-threaded event loop

5ff4f1dbfd3888fba963ec7cc629e6f3?s=128

mthenw

September 27, 2014
Tweet

More Decks by mthenw

Other Decks in Technology

Transcript

  1. @mthenw Senior UI Developer at Egnyte

  2. Working with single-threaded event loop

  3. None
  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);
  21. None
  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!