Web Performance

How TensorFlow.js Became a Performance Bottleneck for My App

When your app becomes a CPU-sucker and a performance hog

Photo by Alexander Andrews on Unsplash

Day 1: Find a Case Study

In the wee hours of the morning, I started my first day of preparing a presentation about identifying and fixing memory leaks. There are many blogs and videos on the net showing how to achieve such a goal but the developers had implemented apps where they purposely did the following:

• added event listeners and never removed them
• set objects as data on a DOM element
• intentionally didn’t clear dead items out of a global cache
• let the dev tools keep a reference to an object by console.log it.

But my plan is different. Instead of implementing a dummy app for the demo where I explicitly leak memory, I want to use a real-world case study so that the challenge would be as close as possible to what we face as software developers in our daily work.

I have started analyzing websites like der-sack.de and wetter.de, then went back to an application that I’ve implemented in the last couple of months and used it to show:

• how to build a dynamic stepper as Angular library
• how to implement an auto-complete with a search feature
• how to navigate between order-creation steps with hand gestures instead of mouse-clicks by leveraging machine learning
• how to log real user web vitals performance metrics

As I tried to create a new order and edit existing ones, I found that, to my amazement, the app was sluggish and the user experience was very slow and terrible. Although this could be good news since the app is a great candidate to study for my presentation, I was confused because I’d used Angular good practices in the implementation and have unsubscribed from all my event listeners.

As a starting point to investigate the memory use, I checked the Performance Timeline record:

1. Open the Performance panel on Chrome DevTools
2. Enable the Memory checkbox