freeCodeCamp/coderadio-client

The app is consuming high CPU

Closed this issue · 5 comments

I checked the CPU consumption using the Task Manager feature on Firefox and found that our app is having very high CPU usage.

Here we have the local version being the most impactful, followed by the prod version. I also opened the Azuracast player for comparison.

Screenshot from 2020-12-29 14-50-39

My hunch is that it has something to do with the AudioContext we are using in the Visualizer component, as it is the most prominent difference between our app and Azuracast's.

eq.context = new AudioContext();


This issue might be related to #80.

Additionally we could unmount the visualizer when the app is in the background tab using libraries such as ifvisible. serkanyersen.github.io/ifvisible.js/demo.html

One possibility of the cause is WebSocket connection. Here is what I found from the MDN article about CPU usage and background tabs (https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#policies_in_place_to_aid_background_page_performance)

Tabs running code that's using real-time network connections (WebSockets and WebRTC) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.

After the tab optimizations for the visualization and the footer we are getting around 0.2;
image

Although removing footer and main components completely lowers cpu usage by 50% on chrome task manager, it barely changes anything on firefox;

#124
image

Might need to go down that route just to make sure we are covering all bases.

@huyenltnguyen should we close this. It seems like the cpu usage of the production app has been considerably reduced.

Yeah sure. Thanks for the help!