[GH-ISSUE #481] CPU maxed while song playing and tab is in focus

kerem commented

2026-02-26 02:32:54 +03:00

Owner

Originally created by @Porco-Rosso on GitHub (Nov 12, 2016).
Original GitHub issue: https://github.com/koel/koel/issues/481

Hey, thanks for contributing to Koel! To save time for both of us, please make sure these checkboxes are checked before submitting the issue:

You have read and followed closely the Wiki, Upgrade Guide, as well as Troubleshooting
The issue has not been reported before
This is not a "how to install on Windows" or "why is my npm messed up" question
You're a cool person

All checked? Now also make sure your issue

Is associated with a version. Or better yet, a commit.
Is as detailed as possible (ahem... OS, browser, steps to reproduce, maybe?)
[] Includes the error output if it's a bug/error report ("Whoops!" is not very helpful, you know)
Is in English, 因为我不说中文。

So I recently reinstalled Koel from scratch. This seemed to have fixed the errors I had before.

However something that has been constant across all browsers and versions of Koel has been the high cpu usage while the tab is in focus. Any time I have the tab open, and am playing a song my CPU gets pinned at 60%-100%.

Nothing is displayed in the console, but doing my best to inspect, it seems to be something connected with the GPU and "update layer tree" being constantly called. My bets is on something connected to updating the player progress.
Any help on this would be appreciated.

Originally created by @Porco-Rosso on GitHub (Nov 12, 2016). Original GitHub issue: https://github.com/koel/koel/issues/481 Hey, thanks for contributing to Koel! To save time for both of us, please make sure these checkboxes are checked before submitting the issue: - [x] You have read and followed closely the [Wiki](https://github.com/phanan/koel/wiki), [Upgrade Guide](https://github.com/phanan/koel/releases), as well as [Troubleshooting](https://github.com/phanan/koel/wiki/Troubleshooting) - [x] The issue has not been reported before - [x] This is not a "how to install on Windows" or "why is my npm messed up" question - [x] You're a cool person All checked? Now also make sure your issue - [x] Is associated with a version. Or better yet, a commit. - [x] Is as detailed as possible (ahem... OS, browser, steps to reproduce, maybe?) - [] Includes the error output if it's a bug/error report ("Whoops!" is not very helpful, you know) - [x] Is in English, 因为我不说中文。 So I recently reinstalled Koel from scratch. This seemed to have fixed the errors I had before. However something that has been constant across all browsers and versions of Koel has been the high cpu usage while the tab is in focus. Any time I have the tab open, and am playing a song my CPU gets pinned at 60%-100%. Nothing is displayed in the console, but doing my best to inspect, it seems to be something connected with the GPU and "update layer tree" being constantly called. My bets is on something connected to updating the player progress. Any help on this would be appreciated.

kerem closed this issue

2026-02-26 02:32:54 +03:00

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@phanan commented on GitHub (Nov 14, 2016):

Can you share how long it takes to max the CPU? How many songs, roughly? Thanks.

@phanan commented on GitHub (Nov 14, 2016): Can you share how long it takes to max the CPU? How many songs, roughly? Thanks.

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@Porco-Rosso commented on GitHub (Nov 14, 2016):

It happens from the first song, within I would say 10-20 seconds.
Looking more carefully, CPU usage from the browser hovers around 60% (on my ~2015 Macbook Pro) while tab is in focus, dropping to less than 10% when the tab is not in focus. And less than 3% when koel is not open.
Other music sites such as spotify or soundcloud don't tend to have anywhere near this impact, so I doubt it has anything to do with audio playback

@Porco-Rosso commented on GitHub (Nov 14, 2016): It happens from the first song, within I would say 10-20 seconds. Looking more carefully, CPU usage from the browser hovers around 60% (on my ~2015 Macbook Pro) while tab is in focus, dropping to less than 10% when the tab is not in focus. And less than 3% when koel is not open. Other music sites such as spotify or soundcloud don't tend to have anywhere near this impact, so I doubt it has anything to do with audio playback

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@phanan commented on GitHub (Nov 15, 2016):

I'm not familiar with this problem tbh – never heard or seen before. What
browser/version, and not less important, do you have any funny addons
installed?

On Tue, Nov 15, 2016 at 2:04 AM, Porco-Rosso notifications@github.com
wrote:

It happens from the first song, within I would say 10-20 seconds.
Looking more carefully, CPU usage from the browser hovers around 60% (on
my ~2015 Macbook Pro) while tab is in focus, dropping to less than 10% when
the tab is not in focus. And less than 3% when koel is not open.
Other music sites such as spotify or soundcloud don't tend to have
anywhere near this impact, so I doubt it has anything to do with audio
playback

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/phanan/koel/issues/481#issuecomment-260411971, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AHrt0i09r7aB2_sXK3BFx2WFHGbcoWpXks5q-KKTgaJpZM4KwcCi
.

@phanan commented on GitHub (Nov 15, 2016): I'm not familiar with this problem tbh – never heard or seen before. What browser/version, and not less important, do you have any funny addons installed? On Tue, Nov 15, 2016 at 2:04 AM, Porco-Rosso notifications@github.com wrote: > It happens from the first song, within I would say 10-20 seconds. > Looking more carefully, CPU usage from the browser hovers around 60% (on > my ~2015 Macbook Pro) while tab is in focus, dropping to less than 10% when > the tab is not in focus. And less than 3% when koel is not open. > Other music sites such as spotify or soundcloud don't tend to have > anywhere near this impact, so I doubt it has anything to do with audio > playback > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > https://github.com/phanan/koel/issues/481#issuecomment-260411971, or mute > the thread > https://github.com/notifications/unsubscribe-auth/AHrt0i09r7aB2_sXK3BFx2WFHGbcoWpXks5q-KKTgaJpZM4KwcCi > .

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@Porco-Rosso commented on GitHub (Nov 15, 2016):

This issue happens for chrome and Vivaldi, Safari is less prone but usage still hovers around 25%

It might be an isolated issue, but I thought I would raise it anyway, incase its a common to others.
Some simple changes might result in better performance. I'll try to see if I can pin it down to something more specific.

@Porco-Rosso commented on GitHub (Nov 15, 2016): This issue happens for chrome and Vivaldi, Safari is less prone but usage still hovers around 25% It might be an isolated issue, but I thought I would raise it anyway, incase its a common to others. Some simple changes might result in better performance. I'll try to see if I can pin it down to something more specific.

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@X-Ryl669 commented on GitHub (Nov 16, 2016):

This is fixed in my fork

@phanan This is due to the song-bar animation. Please check this commit
Basically, CSS animation takes too much CPU (even when very small) because they cause a complete redraw. Using a GIF file instead allows the browser to only replace the part that's modified, and it's invisible to the user, dropping the CPU usage from 30% to ~1,5% for me.
Since the animation is just eye-candy, it's not worth burning CPU for this.

BTW, even if obvious, I allow you to use the gif file from my fork.

@X-Ryl669 commented on GitHub (Nov 16, 2016): This is fixed in my [fork](https://github.com/X-Ryl669/kutr) @phanan This is due to the song-bar animation. Please check this [commit](https://github.com/X-Ryl669/kutr/commit/8b89ae370153369e67f981d515daf640a33f9686) Basically, CSS animation takes too much CPU (even when very small) because they cause a complete redraw. Using a GIF file instead allows the browser to only replace the part that's modified, and it's invisible to the user, dropping the CPU usage from 30% to ~1,5% for me. Since the animation is just eye-candy, it's not worth burning CPU for this. BTW, even if obvious, I allow you to use the gif file from my fork.

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@phanan commented on GitHub (Nov 16, 2016):

@X-Ryl669 See what I have for months in my Koel todo list ;)

Do you have a transparent background gif though? That's what I fail to create.
And thanks for the comment/offer of course!

@phanan commented on GitHub (Nov 16, 2016): @X-Ryl669 See what I have for months in my Koel todo list ;) ![image](https://cloud.githubusercontent.com/assets/8056274/20346435/ec04ac24-ac36-11e6-8438-8a7ea7c0fd50.png) Do you have a transparent background gif though? That's what I fail to create. And thanks for the comment/offer of course!

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@Porco-Rosso commented on GitHub (Nov 16, 2016):

Gave it a shot.

@Porco-Rosso commented on GitHub (Nov 16, 2016): ![bars-transparent](https://cloud.githubusercontent.com/assets/7024527/20349742/026fead0-ac0c-11e6-8ecd-16db2359f127.gif) Gave it a shot.

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@phanan commented on GitHub (Nov 16, 2016):

Thanks, @Porco-Rosso, but the bars don't fade or transform as softly as the CSS version (especially if you notice that last one to the right).

@phanan commented on GitHub (Nov 16, 2016): Thanks, @Porco-Rosso, but the bars don't fade or transform as softly as the CSS version (especially if you notice that last one to the right).

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@phanan commented on GitHub (Nov 16, 2016):

@Porco-Rosso By the way, can you try adding transform: translateZ(0) into .bar like below and see if the CPU goes down?

@phanan commented on GitHub (Nov 16, 2016): @Porco-Rosso By the way, can you try adding `transform: translateZ(0)` into `.bar` like below and see if the CPU goes down? ![image](https://cloud.githubusercontent.com/assets/8056274/20351895/11bf2b6a-ac50-11e6-88f2-51cf7351a2ac.png)

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@Porco-Rosso commented on GitHub (Nov 16, 2016):

@phanan
I made the gif very quickly with an online tool. Maybe if I take the time to make one properly, It will look nicer.
Adding transform: translateZ(0) doesn't seem to help.

@Porco-Rosso commented on GitHub (Nov 16, 2016): @phanan I made the gif very quickly with an online tool. Maybe if I take the time to make one properly, It will look nicer. Adding transform: translateZ(0) doesn't seem to help.

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@phanan commented on GitHub (Nov 17, 2016):

Put my poor GIF editing skill to test – better contribution for the animation welcome!

@phanan commented on GitHub (Nov 17, 2016): Put my poor GIF editing skill to test – better contribution for the animation welcome!

kerem commented

2026-02-26 02:32:54 +03:00

Author

Owner

@X-Ryl669 commented on GitHub (Nov 17, 2016):

GIF only allow a single color out of 256 to be transparent. Since the initial animation is using alpha, that can not work well. That's why I've made the animation with the "official" background color instead (and also, without transparency, it takes less CPU since no blending is required by the browser).
The best would have been APNG or WebP, but it's either Gecko either Webkit and I'm not sure for Edge support.

@X-Ryl669 commented on GitHub (Nov 17, 2016): GIF only allow a single color out of 256 to be transparent. Since the initial animation is using alpha, that can not work well. That's why I've made the animation with the "official" background color instead (and also, without transparency, it takes less CPU since no blending is required by the browser). The best would have been APNG or WebP, but it's either Gecko either Webkit and I'm not sure for Edge support.

kerem referenced this issue

2026-02-26 02:35:51 +03:00

[PR #341] [CLOSED] Make some function. #1219

Rows
Columns

[GH-ISSUE #481] CPU maxed while song playing and tab is in focus #341