Publicidad

Profiling JavaScript Performance

FITC
17 de Sep de 2019
Publicidad

Más contenido relacionado

Publicidad
Publicidad

Profiling JavaScript Performance

  1. ProfilingJavaScript Performance
  2. Welcome
  3. LukeDeWitt EAST COASTER / HUSBAND / FATHER OF 3 UNDER 5 (TIRED) / DEVELOPER / DIRECTOR OF WEB SERVICES Greetings!
  4. JavaScript • Performance is important • Everyone loves fast sites • JS continually redefining itself • Low barrier to entry • Simple to learn • Frameworks
  5. JavaScript
  6. JavaScript ❤ ❤ "
  7. Let’sDiveIn
  8. JavaScript • The problems are the same, front or back end
  9. JavaScript • Single threaded • One “chunk” at a time
  10. ButLuke!
  11. JavaScript • Single threaded • One “chunk” at a time • Avoid blocking code
  12. JavaScript • Blocking Code • Render blocking • Unresponsive UIs • Accessibility Issues • Bad UX
  13. CallStack
  14. CallStack • This is our “single thread” • Last In, First Out • Code added when called (stack frame) • Popped off when “returned” • Repeat until empty • Do it again
  15. TheCallStack call stack
  16. TheCallStack call stack function1()
  17. TheCallStack call stack function1() function2()
  18. TheCallStack call stack function1() function2() function3()
  19. TheCallStack call stack function1() function2() function3() function4()
  20. TheCallStack call stack function1() function2() function3() function4() function5()
  21. TheCallStack call stack function1() function2() function3() function4()
  22. TheCallStack call stack function1() function2() function3()
  23. TheCallStack call stack function1() function2()
  24. TheCallStack call stack function1()
  25. TheCallStack call stack
  26. CallStackExample call stack
  27. CallStackExample call stack
  28. CallStackExample call stack go()
  29. CallStackExample call stack go()
  30. CallStackExample call stack go() start()
  31. CallStackExample call stack go() start()
  32. CallStackExample call stack go() start() andThen()
  33. CallStackExample call stack go() start() andThen()
  34. CallStackExample call stack go() start() andThen() andThenMore()
  35. CallStackExample call stack go() start() andThen() andThenMore()
  36. CallStackExample call stack go() start() andThen() andThenMore() andFinally()
  37. CallStackExample call stack go() start() andThen() andThenMore() andFinally()
  38. CallStackExample call stack go() start() andThen() andThenMore() andFinally()
  39. CallStackExample call stack go() start() andThen() andThenMore() andFinally() console.log()
  40. CallStackExample call stack go() start() andThen() andThenMore() andFinally()
  41. CallStackExample call stack go() start() andThen() andThenMore()
  42. CallStackExample call stack go() start() andThen()
  43. CallStackExample call stack go() start()
  44. CallStackExample call stack go()
  45. CallStackExample call stack
  46. CallStackExample call stack
  47. node --inspect app.js node --inspect-brk app.js
  48. ProfileGraph
  49. ProfileGraph
  50. RecursionExample call stack
  51. RecursionExample call stack recursion()
  52. RecursionExample call stack recursion() recursion()
  53. RecursionExample call stack recursion() recursion() recursion()
  54. RecursionExample call stack recursion() recursion() recursion() recursion()
  55. RecursionExample call stack recursion() recursion() recursion() recursion() recursion()
  56. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion()
  57. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  58. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  59. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  60. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  61. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  62. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  63. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  64. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  65. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  66. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  67. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  68. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  69. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion() recursion()
  70. Example
  71. CallStackExample call stack
  72. CallStackExample call stack
  73. CallStackExample call stack console.log()
  74. CallStackExample call stack console.log()
  75. CallStackExample call stack console.log() cube()
  76. CallStackExample call stack console.log() cube()
  77. CallStackExample call stack console.log() cube() parseInt()
  78. CallStackExample call stack console.log() cube()
  79. CallStackExample call stack console.log() cube()
  80. CallStackExample call stack console.log() cube()
  81. CallStackExample call stack console.log() cube()
  82. CallStackExample call stack console.log()
  83. CallStackExample call stack
  84. ProfileGraph
  85. JavaScript
  86. JavaScript • APIs are exposed • Timers • Callbacks • Promises • Async/Await • Limits “Blocking” code • setTimeout === window.setTimeout
  87. EventLoop • Responsible for pushing items onto the Call Stack • Responsible for executing the top most stack frame • Runs when the stack is empty • Also responsible for pulling stack frames from the queue(s) onto the Call Stack for execution
  88. • Implemented by the browsers / node runtime • “Web APIs” for browsers • C++ for node • Essentially act as threading mechanisms • Better code execution • Multiple Queues ExternalAPIs
  89. JavaScript call stack
  90. JavaScript call stack queue event loop external apis
  91. JavaScript call stack queue event loop function1() function2() function3() external apis
  92. JavaScript call stack queue event loop function1() function2() external apis
  93. JavaScript call stack queue event loop function1() external apis
  94. JavaScript call stack queue event loop external apis
  95. JavaScript call stack queue event loop external apis
  96. JavaScript call stack queue event loop external apis
  97. JavaScript call stack queue event loop external apis setTimeout(myCB)
  98. JavaScript call stack queue event loop external apis setTimeout(myCB)
  99. JavaScript call stack queue event loop external apis timer(myCB)
  100. JavaScript call stack queue event loop external apis myCB()
  101. JavaScript call stack queue event loop external apis myCB()
  102. JavaScript call stack queue event loop external apis
  103. XHR&PromiseExample
  104. XHR&PromiseGraph
  105. XHR&PromiseGraph(Request)
  106. XHR&PromiseGraph(Request)
  107. XHR&PromiseGraph(Response)
  108. XHR&Async/AwaitExample
  109. XHR&Async/AwaitExample
  110. XHR&Async/AwaitExample
  111. ...tooling...
  112. console.log
  113. console.profile console.profileEnd
  114. Example
  115. Example
  116. Example
  117. ExampleGraph
  118. ExampleGraph
  119. Example
  120. MomentofTruth
  121. OpenSource https://dewey.codes
  122. ProjectataGlance • Started building it in 2014 • Domain knowledge / interest existed • Learning project • Hard deadline • … rushed
  123. TheSandbox
  124. CurrentCode (APICall)
  125. CurrentCode (APICall)
  126. ProfileGraph (APICall)
  127. ProfileGraph(APICall) TimeToActualRequestIndex
  128. ProfileGraph(APICall) TTARI 22.387ms
  129. ProfileGraph(APICall) TTARI 22.387ms TTARISD 0.514ms
  130. ProfileGraph(APICall) TTARI 22.387ms TTARISD 0.514ms
  131. CurrentCode (APICall)
  132. MOAROPENSOURCE!!
  133. UpdatedCode (APICall)
  134. ProfileGraph(APICallw/Axios) 18.4ms 1.09ms TTARI TTARISD
  135. TTARI Axios 18.4ms Request 22.387ms 18 Improvemento o
  136. Wecandobetter…
  137. VanillaCode (APICall)
  138. ProfileGraph(APICallw/VanillaJS) 15.9ms 0.535ms TTARI TTARISD
  139. TTARI Axios 18.4ms Request 22.387ms Vanilla 15.9ms 29 Improvemento o
  140. TWENTY-NINE
  141. Thankyouforcoming!
  142. redspace.com / T (902) 444.3490 FACEBOOK REDspace TWITTER @theREDspace LINKEDIN The REDspaceLUKE DEWITT @whatadewitt ThankYou!
  143. ThankYou! Oh, by the way, we’re hiring! https://www.redspace.com/jobs
Publicidad