Blazingly Fast JavaScript

ThePrimeagen

ThePrimeagen

terminal
3 hours, 32 minutes CC
Blazingly Fast JavaScript

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
Close

Course Details

Published: January 20, 2024

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 12 minutes
  • Introduction
    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.
  • Requirements
    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
  • Web Sockets Game Demo
    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%.
  • Running Benchmarks
    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.
  • Inspecting & Debugging Performance
    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.
  • Optimizing Code: Sets vs Array
    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.
  • Refactoring Set to Array
    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
  • Garbage Collector
    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.
  • Memory Profiling
    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.
  • Event Loop & Promises
    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.
  • Refactoring Timer to Remove Promises
    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.
  • Analyzing Results & Removing Async
    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.
  • Speeding Up Web Sockets
    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.
  • Analyzing Web Socket Results
    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
  • Refactoring Collision
    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.
  • Revisiting the Memory Profiler
    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.
  • Memory Pool
    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.
  • Optimizing Logging
    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.
  • Other Performance Considerations
    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
  • Wrapping Up
    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

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

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
Get Unlimited Access Now