Download as PDF, PPTX
Uploaded byFITC
Profiling JavaScript Performance
The document discusses JavaScript performance, emphasizing the importance of fast sites and addressing issues like blocking code, unresponsive UIs, and accessibility. It explains the call stack, event loop, and techniques for improving performance through non-blocking code, such as callbacks, promises, and async/await. Additionally, it showcases practical examples and code performance comparisons to highlight improvements in request handling.
More Related Content
Similar to Profiling JavaScript Performance
![[DevDay2018] How does JavaScript actually work? - By: Vi Nguyen, Senior Softw...](https://cdn.slidesharecdn.com/ss_thumbnails/f106-nguyenhuuthevi-howdoesjavascriptactuallyworks-180419102642-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Profiling JavaScript Performance
- 1.
- 2.
- 3. LukeDeWitt EAST COASTER /HUSBAND / FATHER OF 3 UNDER 5 (TIRED) / DEVELOPER / DIRECTOR OF WEB SERVICES Greetings!
- 6. JavaScript • Performance isimportant • Everyone loves fast sites • JS continually redefining itself • Low barrier to entry • Simple to learn • Frameworks
- 7.
- 8.
- 9.
- 10. JavaScript • The problemsare the same, front or back end
- 11. JavaScript • Single threaded •One “chunk” at a time
- 12.
- 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.
- 16. CallStack • This isour “single thread” • Last In, First Out • Code added when called (stack frame) • Popped off when “returned” • Repeat until empty • Do it again
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. node --inspect app.js node--inspect-brk app.js
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91. JavaScript • APIs areexposed • Timers • Callbacks • Promises • Async/Await • Limits “Blocking” code • setTimeout === window.setTimeout
- 92. EventLoop • Responsible forpushing 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 bythe browsers / node runtime • “Web APIs” for browsers • C++ for node • Essentially act as threading mechanisms • Better code execution • Multiple Queues ExternalAPIs
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102. JavaScript call stack queue event loop externalapis setTimeout(myCB)
- 103. JavaScript call stack queue event loop externalapis setTimeout(myCB)
- 104. JavaScript call stack queue event loop externalapis timer(myCB)
- 105.
- 106.
- 107.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128. ProjectataGlance • Started buildingit in 2014 • Domain knowledge / interest existed • Learning project • Hard deadline • … rushed
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141. TTARI Axios 18.4ms Request 22.387ms 18Improvemento o
- 142.
- 143.
- 144.
- 145. TTARI Axios 18.4ms Request 22.387ms Vanilla15.9ms 29 Improvemento o
- 146.
- 147.
- 148. redspace.com / T(902) 444.3490 FACEBOOK REDspace TWITTER @theREDspace LINKEDIN The REDspaceLUKE DEWITT @whatadewitt ThankYou!
- 149. ThankYou! Oh, by theway, we’re hiring! https://www.redspace.com/jobs