Issue: High CPU usage

[Mishasama]

Describe the bug

When opening and viewing the settings page, the CPU and memory usage is unusually high.

To Reproduce

1. Open the settings
2. See error

Expected behavior

A settings page shouldn't have such a high CPU usage, is something caught in a dead loop?

Screenshots

Extension Information

• Version: 5.33.4.6/7
• Source: store & GitHub
• Browser: chrome & edge
• Operating System: Windows

Additional comments

CPU usage drops to single digits when placing the page in the background without displaying it, is this caused by any active element rendering over and over again?

Also, when using TTVT, all Twitch tabs' CPU usage goes high.

From Ephellon

• Seems to be caused by events being fired less than 100ms

[Ephellon]

I can get spikes up to 54.6%. Please provide detailed reproduction steps. If you simply just opened the Settings page, would you be ok with detailing your available RAM (see navigator.deviceMemory)?

1. Open Settings
2. Right click and select Inspect
3. Select the Console tab
4. Type navigator.deviceMemory
5. Let me know what number shows up. Mine for example, is 8, meaning I have at least 8GB available in the browser

[Mishasama]

8

[Ephellon]

Thank you. I'll continue the stress tests to see what module is causing hiccups

[Ephellon]

Found issue(s), some events were set to fire at 10ms. Changed to 100ms, and CPU usage is <1% 5mins later. Max spike 90% while typing and moving mouse simultaneously.

[Ephellon]

@Mishasama please try v5.33.4.8-beta to see if the Settings page has improvements on your system 😊

ttv-tools.v5.33.4.8-beta.zip

[Mishasama]

Max spike 90% while typing and moving mouse simultaneously.

Indeed, this happens once these actions are active, even with the .8 version.
Are there any features that use these determinations?

And still get high usage on the stream page.

---

Maybe... try asking ChatGPT to help with debugging?

There are a few clues in my observations:

1. Are there concentrated polling behaviors? For example, different functions execute in parallel or for a short period. How about 1 second?
2. Are there any incorrect nested loop conditions? This is commonly referred to as an infinite loop.
3. Is there real-time animation rendering with high resource consumption? Such as the high frame rate rainbow animation seen in "Buy When Available."

---

I found another issue.
Recover Frames
It will constantly pause and resume playback for short periods.
When we need this function, it means that our network or hardware has a problem that cannot be quickly fixed.

[Ephellon]

Stream page, yes, I want to start on the smaller, more manageable Setting spage first to see what can be changed.

---

1. 1 second won't work, there are dynamic changes being made
2. Only the infinite loops needed are present. The page would freeze if there were any unaccounted for...
3. There's always real-time animation playing... requestAnimationFrame. The rainbow animation uses the GPU

---

Recover Frames → Please elaborate in a new issue

[Mishasama]

Tabs consume about twice as much CPU when displayed in the foreground as when running in the background, so I suspect it's a rendering-related issue. Maybe you can reduce consumption by lowering the frame rate; there's a power-saving mode option in Chrome for lowering the frame rate globally, so maybe that helps somewhat?
But it's also possible that the browser is limiting the behavior of the tabs in the background, which appears to be decreasingly usage...

[Ephellon]

Those settings are managed by Chrome on the Application scale—I have little to no control over that. The best I can do is change how the extension works...

[Mishasama]

Bad news, still very high.