Reader performance issues

Psi

Joined
Mar 29, 2018
Messages
2
Specs:
Firefox 68.01 and 69beta on Manjaro Linux
Extensions Disabled
Tested with WebRender Enabled/Disabled
Tested with JavaScript Enabled/Disabled

I noticed upon opening the reader page for manga, my CPU usage would spike up to 200% and maintain a 100%+ utilization while the reader was open. Upon doing some performance profiling it appears the issue is derived from the loading icon element ".reader-load-icon". Deleting the element seemed to alleviate this issue.

One of minor causes seems to be Firefox contantly "detecting" CSS changes/activity from this icon even though loading is complete (althought it is probably because the icon is spinning hidden in the background) and performing CSS/DOM recalculation + rendering non-stop. Its recalculating CSS so often that it doesn't even appear as individual events but a continuous bar in the Firefox performance tool. Modifying ".reader-load-icon" opacity rule to "1" in "reader.css" seems to eliminate the css recalculation activity but only makes a small dent in CPU utilization. Only deleting the ".reader-load-icon" will completely solve this issue.

Cause does not appear to be JavaScript either as the problem persists with JavaScript disabled. Interestingly, disabling JavaScript results in a page showing the spinning loading icon.

I'm not sure whether this is a website issue, Firefox engine issue, or simply a hardware compatibility issue. I'm still currently trying to find the actual source of this issue but I hope that some forum members may provide some insight into this problem. I'm currently using a stopgap solution by automatically deleting the loading icon element on page load.

There's no issues with Chromium 75 or 76 interestingly enough and no issues with Firefox on Windows

TLDR: Firefox on Linux doesn't not like Mangadex's spinning loading icon

UPDATE:
Seems like "position: fixed" on the loading icon that seems to be making Firefox very unhappy. Disabling it solved the issue. Firefox must have thought it was visible (when it wasn't) and was rendering it in the background. With that said and fixed, even the brief appearance of the loading icon when changing pages is using a lot of CPU even only for a moment 🤭.
 
Custom title
Staff
Developer
Joined
Jan 19, 2018
Messages
2,437
@Psi That's... odd, to say the least. You're the first to report anything like this, so thanks a lot for being thorough about investigating and reporting it. I could probably position the element in some other way.
 
Power Uploader
Joined
Feb 1, 2018
Messages
56
I noticed the same problem, but since it’s been around for quite a while, I assumed it to be a WontFix issue…

I’m using Firefox 60.8.0esr on Linux and CPU usage is constantly high while viewing anything on the reader. When switching to a different tab, CPU usage drops to zero.

Code:
<div class="reader-load-icon">
    <span class="fas fa-circle-notch fa-spin" aria-hidden="true"></span>
</div>
The DOM inspector shows that the inner span element is a permanently spinning 112.567x112.567px square with nothing in it. It is marked as being visible (HTML code is not greyed out). Deleting the span element makes the CPU usage drop to zero. Hiding the parent div element works just as well, so I worked around the issue with this bit of custom CSS:
Code:
.reader-load-icon {display:none}
With the parent node hidden, the span element isn’t rendered and apparently not animated either, so CPU usage is zero.
 
Custom title
Staff
Developer
Joined
Jan 19, 2018
Messages
2,437
@Psi @CatWEax Haven't had time to write a cool solution so as a quick stopgap solution the reader now uses simply display:none to hide the spinner, which unfortunately also disables the fade animations. I'll try come up with something better later.
 
Power Uploader
Joined
Feb 1, 2018
Messages
56
Thanks for looking into it. Personally, I’m not into fade effects anyway. Too impatient to wait for any fading if things could be happening instantly instead. 😀

Btw, disabling
Code:
position:fixed
on the loading icon, as mentioned by Psi, doesn’t fix it for me. That only moves the invisible spinning box to the bottom left of the page. As long as it’s off-screen, CPU usage is low, but once I scroll down, CPU usage is high again.
 

Psi

Joined
Mar 29, 2018
Messages
2
@CatWEax
Interesting how it only affected Firefox on Linux, there shouldn't be that significant of a difference between the Linux and Windows version. I might have to look into it a bit more. I just loaded some JavaScript to delete the element as i found that
Code:
position:fixed
didn't quite fully fix it as you discovered. Now that I think about it, setting
Code:
display:none
is much cleaner lol. At least it is now implemented as a stopgap fix.
 

Users who are viewing this thread

Top