Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Profiling JavaScript Performance

60 Aufrufe

Veröffentlicht am

Presented at Web Unleashed 2019
More info at www.fitc.ca/webu

Luke DeWitt
REDspace
Overview
JavaScript’s popularity has exploded over the last decade, taking it from a laughable scripting language to one that powers much of the web today. Because it’s so flexible and so easy to learn, it’s extremely popular with new developers looking to cut their teeth in programming. However, these strengths are also weaknesses, as it’s incredibly easy to write bad JavaScript without even knowing it.

A lot of these newer developers jump from “Hello, World!”, to TodoMVC in order to find the library that makes their life easier. By doing this, they skip over some of the important details of not only how JavaScript works, but also how to optimize its performance to ensure the best user experience.

The Chrome profiler is a very handy tool that not a lot of developers have experience with. In this talk, we’ll take a beginner’s look at the profiler tool and examine how to use it to best improve your web application, and identify bottlenecks in your code without having to rely only on console.log statements.

Objective
To help developers understand how to better make use of the JavaScript profiler.

Target Audience
Any JavaScript developers

Assumed Audience Knowledge
Basic JavaScript

Level
Beginner / intermediate

Five Things Audience Members Will Learn
Javascript inner-workings
Profiling concepts
Identifying bottlenecks
Profiling node applications
Tooling

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Profiling JavaScript Performance

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

×