Profiling JavaScript Performance
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
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Profiling JavaScript Performance
Similar to Profiling JavaScript Performance (20)
More from FITC
More from FITC (20)
Recently uploaded
Recently uploaded (20)
Profiling JavaScript Performance
- 2. Welcome
- 3. LukeDeWitt EAST COASTER / HUSBAND / FATHER OF 3 UNDER 5 (TIRED) / DEVELOPER / DIRECTOR OF WEB SERVICES Greetings!
- 6. JavaScript • Performance is important • Everyone loves fast sites • JS continually redefining itself • Low barrier to entry • Simple to learn • Frameworks
- 7. JavaScript
- 9. Let’sDiveIn
- 10. JavaScript • The problems are the same, front or back end
- 11. JavaScript • Single threaded • One “chunk” at a time
- 12. ButLuke!
- 13. JavaScript • Single threaded • One “chunk” at a time • Avoid blocking code
- 14. JavaScript • Blocking Code • Render blocking • Unresponsive UIs • Accessibility Issues • Bad UX
- 15. CallStack
- 16. 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
- 49. node --inspect app.js node --inspect-brk app.js
- 52. ProfileGraph
- 53. ProfileGraph
- 60. RecursionExample call stack recursion() recursion() recursion() recursion() recursion() recursion()
- 74. Example
- 89. ProfileGraph
- 90. JavaScript
- 91. JavaScript • APIs are exposed • Timers • Callbacks • Promises • Async/Await • Limits “Blocking” code • setTimeout === window.setTimeout
- 92. 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
- 93. • Implemented by the browsers / node runtime • “Web APIs” for browsers • C++ for node • Essentially act as threading mechanisms • Better code execution • Multiple Queues ExternalAPIs
- 102. JavaScript call stack queue event loop external apis setTimeout(myCB)
- 103. JavaScript call stack queue event loop external apis setTimeout(myCB)
- 104. JavaScript call stack queue event loop external apis timer(myCB)
- 105. JavaScript call stack queue event loop external apis myCB()
- 106. JavaScript call stack queue event loop external apis myCB()
- 109. XHR&PromiseExample
- 110. XHR&PromiseGraph
- 117. ...tooling...
- 118. console.log
- 120. Example
- 121. Example
- 122. Example
- 123. ExampleGraph
- 124. ExampleGraph
- 125. Example
- 126. MomentofTruth
- 128. ProjectataGlance • Started building it in 2014 • Domain knowledge / interest existed • Learning project • Hard deadline • … rushed
- 129. TheSandbox
- 138. MOAROPENSOURCE!!
- 141. TTARI Axios 18.4ms Request 22.387ms 18 Improvemento o
- 142. Wecandobetter…
- 145. TTARI Axios 18.4ms Request 22.387ms Vanilla 15.9ms 29 Improvemento o
- 146. TWENTY-NINE
- 147. Thankyouforcoming!
- 148. redspace.com / T (902) 444.3490 FACEBOOK REDspace TWITTER @theREDspace LINKEDIN The REDspaceLUKE DEWITT @whatadewitt ThankYou!
- 149. ThankYou! Oh, by the way, we’re hiring! https://www.redspace.com/jobs