Media is too big
VIEW IN TELEGRAM
16. Controlling the URL & Redirection
ThePrimeagen demonstrates how to create a contacts page with the ability to delete contacts and update the URL accordingly. Additionally, they explain how to handle infinite scrolling and filtering using HTMX. They emphasize the engineering aspect of HTMX and encourage a step-by-step approach to problem-solving.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-patterns/patterns
#lesson
ThePrimeagen demonstrates how to create a contacts page with the ability to delete contacts and update the URL accordingly. Additionally, they explain how to handle infinite scrolling and filtering using HTMX. They emphasize the engineering aspect of HTMX and encourage a step-by-step approach to problem-solving.
- https://theprimeagen.github.io/fem-htmx/lessons/htmx-patterns/patterns
#lesson
Media is too big
VIEW IN TELEGRAM
17. Wrapping Up
ThePrimeagen wraps up the course by discussing various topics related to HTMX, including the use cases where HTMX may not be suitable, the integration of HTMX with other frameworks like React, preserving state without form submission, and the use of CSS syntax. The instructor also answers some questions from the audience.
#lesson
ThePrimeagen wraps up the course by discussing various topics related to HTMX, including the use cases where HTMX may not be suitable, the integration of HTMX with other frameworks like React, preserving state without form submission, and the use of CSS syntax. The instructor also answers some questions from the audience.
#lesson
Title: Blazingly Fast JavaScript
Description: Learn advanced JavaScript performance optimization: garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!
Link: https://frontendmasters.com/courses/blazingly-fast-js/
Time: 3 hours, 32 minutes
Lessons: 20 / 20
Tags: #course #frontendmasters #720p
Description: Learn advanced JavaScript performance optimization: garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!
Link: https://frontendmasters.com/courses/blazingly-fast-js/
Time: 3 hours, 32 minutes
Lessons: 20 / 20
Tags: #course #frontendmasters #720p
Frontendmasters
JavaScript Performance Optimization Techniques
Learn advanced JavaScript performance optimization: garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!
❤1
Media is too big
VIEW IN TELEGRAM
1. 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.
- https://theprimeagen.github.io/fem-jsperf/
#lesson
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.
- https://theprimeagen.github.io/fem-jsperf/
#lesson
Media is too big
VIEW IN TELEGRAM
2. 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.
- https://github.com/ThePrimeagen/js-perf-example
#lesson
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.
- https://github.com/ThePrimeagen/js-perf-example
#lesson
Media is too big
VIEW IN TELEGRAM
3. 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%.
- https://theprimeagen.github.io/fem-jsperf/lessons/shooter-program/our-first-program
#lesson
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%.
- https://theprimeagen.github.io/fem-jsperf/lessons/shooter-program/our-first-program
#lesson
Media is too big
VIEW IN TELEGRAM
4. 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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
5. 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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
6. 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.
#lesson
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.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
7. 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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
8. 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.
- https://theprimeagen.github.io/fem-jsperf/lessons/i-promise-performance/gc
#lesson
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.
- https://theprimeagen.github.io/fem-jsperf/lessons/i-promise-performance/gc
#lesson
Media is too big
VIEW IN TELEGRAM
9. 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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
10. 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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
11. 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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
12. 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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
13. 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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
14. 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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
15. 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.
- https://theprimeagen.github.io/fem-jsperf/lessons/specifics/problem-specific-changes
#lesson
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.
- https://theprimeagen.github.io/fem-jsperf/lessons/specifics/problem-specific-changes
#lesson
Media is too big
VIEW IN TELEGRAM
16. 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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
17. 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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
18. 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.
#lesson
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.
#lesson