Optimization and performance analysis of JavaScript applications (JS Conf Colombia)

Talk presented at JS Conf Colombia 2023, in english.
In this talk, learn how to use performance diagnostic tools, such as Chrome's DevTools, to identify and troubleshoot code execution issues. The first step will be to analyze the lifecycle of a JavaScript application, from loading and analyzing the source code to optimizing the browser's JavaScript compiler. Then, using Chrome DevTools, the code will be analyzed, seeking to identify relevant optimization opportunities, in addition to analyzing the flame chart timeline. Finally, understand proper scenarios for Lazy Loading, debouncing, Web Workers and amazing performance tools!

Transcript

1. OPTIMIZATION AND PERFORMANCE ANALYSIS OF JAVASCRIPT APPLICATIONS JÉSSICA FÉLIX (@JESSILYNEH)
2. LIFECYCLE OF A JAVASCRIPT APPLICATION @jessilyneh
3. Lifecycle of a JavaScript application @jessilyneh Loading the JavaScript application source code
4. @jessilyneh
5. Lifecycle of a JavaScript application @jessilyneh Loading the JavaScript application source code Analyzing the source code
6. @jessilyneh
7. @jessilyneh AST (Abstract Syntax Tree)
8. Lifecycle of a JavaScript application @jessilyneh Loading the JavaScript application source code Analyzing the source code Compiling the source code into machine code.
9. @jessilyneh
10. Lifecycle of a JavaScript application @jessilyneh Loading the JavaScript application source code Analyzing the source code Compiling the source code into machine code. Optimizing the code
11. Optimizing the code @jessilyneh
12. Optimizing the code @jessilyneh
13. Optimizing the code inlining @jessilyneh
14. Lifecycle of a JavaScript application @jessilyneh Loading the JavaScript application source code Analyzing the source code Compiling the source code into machine code. Optimizing the code Creating the main object and global scope
15. Lifecycle of a JavaScript application @jessilyneh Loading the JavaScript application source code Analyzing the source code Compiling the source code into machine code. Optimizing the code Creating the main object and global scope Executing the code
16. Lifecycle of a JavaScript application @jessilyneh Loading the JavaScript application source code Analyzing the source code Compiling the source code into machine code. Optimizing the code Creating the main object and global scope Executing the code event management
17. Lifecycle of a JavaScript application @jessilyneh Loading the JavaScript application source code Analyzing the source code Compiling the source code into machine code. Optimizing the code Creating the main object and global scope Executing the code event management end of execution
18. @jessilyneh Javascript Engines!
19. V8: used in Google Chrome @jessilyneh
20. @jessilyneh SpiderMonkey: used in Mozilla Firefox
21. @jessilyneh Chakra: Used in Microsoft Edge
22. @jessilyneh JavaScriptCore: Used in Apple's Safari
23. @jessilyneh Code performance techniques
24. @jessilyneh
25. @jessilyneh Lazy Loading
26. @jessilyneh Deboucing
27. @jessilyneh Web Workers
28. @jessilyneh Does anyone here use only pure JavaScript in applications?
29. @jessilyneh The more libraries, the more complexity, the more performance problems
30. @jessilyneh it depends
31. @jessilyneh React performance problems
32. Use React @jessilyneh React performance problems
33. @jessilyneh just kidding!
34. Components re-rendering unnecessarily @jessilyneh React performance problems
35. Components re-rendering unnecessarily React performance problems @jessilyneh This is not a Javascript problem
36. Components re-rendering unnecessarily React performance problems @jessilyneh How can we monitor this problem?
37. @jessilyneh react-devtools
38. @jessilyneh react-devtools
39. @jessilyneh Performance Monitor Developer Tools Google Chrome
40. @jessilyneh Monitoring 1 requisition X 1000 requisitions monioring
41. @jessilyneh Autocannon Benchmarking tool written in Node.js
42. @jessilyneh Climem Monitor the memory consumption of your node process via CLI
43. @jessilyneh Clinic.js
44. @jessilyneh
45. @jessilyneh APM Tools - N|Solid
46. @jessilyneh
47. Special Tips for web developers @jessilyneh Learn Core Web Vitals Google
48. Thank you <3 in/jessilyneh/ @jessilyneh
49. References @jessilyneh O'Reilly - High Performance JavaScript https://blog.matheuscastiglioni.com.br/desconstruindo-a-web-como-v8-funciona/ https://efcl.info/2016/03/06/ast-first-step/ https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775 https://devporai.com.br/5-dicas-para-otimizar-codigo-javascript/ https://geekflare.com/es/best-javascript-online-compilers/ O'Reilly - David Flanagan - “JavaScript: the Definitive Guide https://www.freecodecamp.org/news/execution-context-how-javascript-works-behind- the-scenes/
50. References @jessilyneh https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Memory_management https://medium.com/@selmankoral/memory-management-in-javascript-781e1098e5b3 https://loadninja.com/articles/debug-javascript-performance/ https://www.wmtips.com/html/lazy-loading-definitive-guide/ https://www.freecodecamp.org/news/javascript-debounce-example/ https://woliveiras.com.br/posts/o-que-e-para-que-serve-throttle%20/ https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Memory_management https://web.dev/articles/workers-basics?hl=pt-br https://www.freecodecamp.org/news/how-webworkers-work-in-javascript-with-example/
51. References @jessilyneh https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md https://developer.chrome.com/docs/devtools/performance/reference/ https://github.com/mcollina/autocannon https://www.nearform.com/blog/tracking-memory-allocation-node-js/ https://github.com/mcollina/climem https://clinicjs.org/ https://github.com/clinicjs/node-clinic https://youtu.be/CS03W_YSdJc?si=DrbejVSkuTnUkaR0