Overview: Javascript Memory Leaks and Main Thread Bottleneck
There will come a point at least once in your career as a JavaScript developer where you’ll run into a memory leak issue (usually on production) and you’d be surprised to know that such a thing exists (and you’ve to take care of it). Lol. A moment that lets you transition to being a senior developer?
Recently, while working on ezCreatives I landed on one such problem.
I am not actually going to explain any particular issue here but will point you to all the important links and resources you’ll need to understand, debug, and solve such issues in general. (Someday I might write a narrowed down article)
Tools you need to know to solve for the Memory leak and CPU bottleneck issues (all are available in the browser’s developer tools):
Most common types of memory leaks:
- Unintended Global Variables
- Unchecked timers or callbacks
- Detached DOM elements
- Closures
You can read about these common memory leak issues here, it’s explained comprehensively.
Main thread (CPU) bottleneck solutions
- Split up the long tasks (your as well as the third-party scripts)
- Run the chunks of code at the right time and the right place
- Use web workers to free your main thread (the ultimate)
Must have knowledge:
- How the renderer process works in the browser
- Javascript Event Loop and Promises
- Javascript Garbage Collection
- Developer tools
Conclusion
JavaScript is awesome. Use its power wisely. Will write a better conclusion someday.
Thanks for reading.
More content at plainenglish.io
