Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimization and performance analysis of JavaSc...

Jessilyneh
November 18, 2023

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!

Jessilyneh

November 18, 2023
Tweet

More Decks by Jessilyneh

Other Decks in Technology

Transcript

  1. Lifecycle of a JavaScript application @jessilyneh Loading the JavaScript application

    source code Analyzing the source code Compiling the source code into machine code.
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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/