The following are notes from the Frontend Masters - Blazingly Fast JavaScript course by the great ThePrimeagen. I've also included my own personal insights and discoveries from research and practical experience.

In the first part, we cover how to measure performance issues.

JavaScript Performance ​

The course primarily covers performance testing and improvements on Node.js servers, but some principles are also relevant to frontend applications.

Other things to possibly look into that are not covered by the course:

• perf
• chrome-tracing
• v8-tracing

Other interesting resources to look into:

• Beginners guide to Chrome tracing
• MDN JavaScript performance optimisation

Frontend Framework DOM Redraw ​

Modern JavaScript frameworks like Vue.js rely on a virtual DOM for efficient rendering. However, performance issues can still arise, especially from frequent or unnecessary DOM redraws.

DOM Redraw Considerations ​

• Framework Limitations: Many performance bottlenecks stem from framework code, over which you have limited control.
• Diagnosis: Use Chrome DevTools to identify excessive redraws, but be aware that complete optimization may require upgrading your framework or reconsidering your approach.

Server vs. Browser Client Performance Testing ​

Real-World Testing ​

It’s essential to test performance in environments that closely match production. For server-side applications, local testing on a development machine can yield misleading results compared to live production due to differences in CPU, memory, and networking.

Tips for Browser Testing ​

• Use Chrome DevTools’ Performance and Memory tabs.
• Simulate production conditions as closely as possible, using resource throttling for a more accurate assessment.

The Best Way to Start: Measuring ​

Chrome DevTools - Performance Tab ​

1. Record a performance profile for at least 10 seconds to capture a representative sample.
2. Use the Bottom-Up view to identify performance bottlenecks.
   • Self Time: Time spent in a function, excluding child calls. This is the most critical metric for identifying optimizations.
   • Total Time: Time spent in a function, including child calls.

Chrome DevTools - Memory Tab ​

1. Use Heap Snapshot and Allocation Sampling to understand memory usage and garbage collection.
2. Analyze the results using the Chart view to pinpoint memory-heavy operations.

Node.js Performance Testing ​

For Node.js applications, use the --inspect flag to access Chrome DevTools:

tsc && node --inspect dist/src/server.js --logPath /tmp/testing

• Open chrome://inspect/#devices in Chrome to connect to your server.
• Use the Performance and Memory tabs for detailed insights, similar to frontend testing.

Next: Usual Suspects for Optimization ​

Now that we know how to measure performance, check out some common optimization areas in the next part of this 2 part blog series on Javascript Performance Optimization.