ThePrimeagen
terminal
Blazingly Fast JavaScript
3 hours, 32 minutes CC
Course Description
Make your code faster through benchmarking and optimization. Using a practical Web Sockets game demo, you'll learn to optimize memory and asynchronous JavaScript, testing and iterating throughout the course. You'll tackle garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Gain advanced techniques such as employing memory pools and understanding Prime's philosophy of performance-driven programming, preparing you to write blazingly fast and efficient code!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: January 20, 2024
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 12 minutes
ThePrimeagen introduces the topic of JavaScript performance optimization. They discuss the misconception around premature optimization and the importance of thinking about efficiency. The instructor also mentions that the course will focus on using tools available in Chrome to identify bottlenecks and make performance improvements.
ThePrimeagen provides instructions for installing Rust, Golang, and the required versions of Node.js. The optimizations will be available in different branches, allowing students to follow along even if they encounter difficulties.
Benchmarking & Performance Monitoring
Section Duration: 51 minutes
ThePrimeagen provides an overview of a basic game program they have created. The lesson also covers the code for the server, runner, ticker, and game loop, as well as addressing questions from the audience. The instructor mentions a problem with frames overflowing or underflowing and sets a goal to reduce this issue to below 25%.
ThePrimeagen discusses the concept of measuring performance in JavaScript. They introduce a utility they have created to visualize server performance, explain the importance of adjusting the file limit, and proceed to run tests with different numbers of connections to observe the server's performance. They also emphasize the need for multiple measurements to understand how performance changes with increasing input.
ThePrimeagen discusses an example of hotspot optimizations and how they can be used to improve the performance of a program. They demonstrate how to open the Chrome Debugger and use the performance and memory tabs to analyze the performance of a Node server. They provide examples and walk through the process of analyzing the performance of a program using the Chrome Debugger.
ThePrimeagen discusses the performance of using sets versus arrays in JavaScript and analyzes a code example that compares the speed of finding unique characters using sets and arrays. They demonstrate that arrays can be faster than sets for smaller data sizes, but sets become more efficient as the data size increases. The importance of choosing the appropriate data structure based on the specific use case to optimize performance is also discussed in this segment.
ThePrimeagen updates the code to use an array instead of a set for storing bullets in a game. They explain the changes they made to the code, including removing the bullet set from the player state, creating a public bullets array, updating the update function to iterate over the bullets array, and modifying the createBullet function to push bullets into the array. They also run tests to ensure that the changes did not introduce any errors and measure the performance improvement of the updated code.
Garbage Collection & Async Code
Section Duration: 1 hour, 21 minutes
ThePrimeagen discusses garbage collection in JavaScript and how it affects performance. They explain the difference between major and minor garbage collection, as well as the generational hypothesis. The instructor also mentions the impact of garbage collection on servers and shares their experience with optimizing for reduced GCs.
ThePrimeagen demonstrates how to use memory profiling tools to analyze memory allocation and identify areas of potential optimization. They also explain the significance of different memory regions and highlight the memory usage of certain functions and objects.
ThePrimeagen discusses the impact of promises on performance in Node.js. They analyze the code and identify that a significant portion of the code execution and memory usage is related to promises. They also explain how promises are processed in the event loop and highlight that promises are not free and can have adverse effects on performance.
ThePrimeagen makes changes to improve the performance of the game loop. They remove the use of timers and instead create a ticker class that returns the next time the game loop should run. They also create a map of expiry callbacks and update the game loop function to use callback recursion instead of an async loop. The goal is to reduce the number of promises created and improve memory and CPU efficiency.
ThePrimeagen discusses the results of the optimizations made in the previous lessons. They analyze the performance improvements and compare the before and after results. They also identify some remaining issues and discuss the importance of considering both performance and memory optimizations.
ThePrimeagen discusses the process of optimizing a Node.js application by replacing the existing WebSocket library. The instructor explains the steps involved in installing and using the new library, and demonstrates how to modify the code to work with the new WebSocket implementation. The lesson also touches on the concept of reducing JavaScript code to improve performance.
ThePrimeagen makes some changes to the code to update the program to use WebSockets instead of promises. They define a WebSocket object and create functions for handling WebSocket events such as on close and on message. They also make some optimizations to improve the performance of the program. Finally, they run some tests to measure the impact of the changes on memory and performance.
Update & Memory Optimizations
Section Duration: 56 minutes
ThePrimeagen discusses the previous optimizations made, such as moving promises out of the main area and using C++ for processing frame data in WebSockets. They also introduce a new optimization technique by rethinking the update function and making it more specific to the problem at hand. They make changes to the code and test the performance again to see if the optimization has made a difference.
ThePrimeagen discusses the problem of not seeing significant improvements in the program despite making updates and explores two possible solutions: increasing the amount of connections to test if it makes a difference, or focusing on improving the program's efficiency and reducing memory usage. They also introduce the topic of memory usage and suggest checking where the memory is being allocated in the program.
ThePrimeagen discusses the concept of memory pools in JavaScript and how they can be used to reduce memory usage. They explain that a memory pool is a technique where the same object is created and reused multiple times instead of creating and destroying new objects. They also demonstrate how to implement a simple memory pool in JavaScript and discuss the benefits and considerations of using memory pools.
ThePrimeagen discusses the potential problems with using arrays for data storage and suggests using a linked list instead. They also talk about the impact of logging on memory usage and suggest considering conditional logging to optimize performance. The instructor then makes changes to the code to remove logging and measure the impact on memory usage and performance.
ThePrimeagen discusses various optimizations and improvements that can be made to a codebase. They explore the impact of different changes, such as updating logging, using linked lists, changing data interchange formats, and optimizing logging. The instructor also emphasizes the importance of testing in a real environment and making informed guesses to improve performance.
Wrapping Up
Section Duration: 10 minutes
ThePrimeagen wraps up the course by discussing the importance of caring about performance early on in a project. They also touch on different programming languages and their performance characteristics, as well as the use of optimization techniques such as avoiding promises on the hot path and deferring networking to C. The instructor concludes by reflecting on the progress made throughout the course and encouraging students to continue exploring performance optimization.
ThePrimeagen has a REALLY good course on Frontend Masters, "Blazingly Fast JavaScript" that goes through JavaScript optimizations and actually using the V8 Profiler properly and it’s very eye opening. Honestly highly recommend.
Chad Smith
twigman08
ThePrimeagen course, "Blazingly Fast JavaScript" LEGIT had me speeding up my JS and fix mistakes I've been doing for years. 10/10 would recommend.
Harshdeep Singh Hura
kinngh
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops