joelacus / RedditEnhancer

A browser extension to tweak the user interface on Reddit
83 stars 1 forks source link

Lag + CPU Spike when reading comments with resize post enabled. #40

Closed Nyx-lol closed 5 months ago

Nyx-lol commented 7 months ago

Great Extension, I've been using this for a while. But in the newest update I encountered an issue, When Resize Feed/Post is enabled opened posts lag quite a lot. Recreate this by enabling resize, opening a post and hiding comments one after another. Not only is it quite laggy it also spikes CPU usage. >0.5% usage before and nearly 16% spike while hiding comments. Great work overall though, hope this is fixed quickly.

joelacus commented 7 months ago

Hi. Sorry for this issue. I'm not sure why the resize feature would cause lag when hiding comments as it only changes some CSS for the page layout, but I will have a look into it for you. Do you not have this issue when the resize feature is disabled? I'm aware that the "Auto Expand Comments" option lags a page initially though as it tries to expand all the comments (I'm working on improving this). Do you have this enabled by any chance? Also, which version of Reddit, and which browser are you using? Thanks.

sliceanddice9 commented 6 months ago

Using the Reddit app from the Microsoft Store on Windows 10 (which is a port that looks and functions very similarly to the actual Microsoft Edge PWA), triggers lots of lag when writing up a post. The lag only started happening after downloading the update to the 1.0.1 version. Normally refreshing the page before writing up a post helps mitigate the lag but not always.

No such slow down with the Reddit website running the 1.0.1 version of the extension on Firefox though.

joelacus commented 6 months ago

Interesting, I didn't even know you could run the extension on PWAs, that's cool. Do you experience the lag using the normal Edge browser as well? And have you noticed if certain features cause the lag when enabled? @Nyx-lol mentioned when the 'Resize Feed/Post' option was enabled it caused the lag. Which UI does the Reddit app use btw, I'm guessing the latest "mobile" version?

I develop primarily for Firefox, so that's good to hear haha

sliceanddice9 commented 6 months ago

Interesting, I didn't even know you could run the extension on PWAs, that's cool. Do you experience the lag using the normal Edge browser as well? And have you noticed if certain features cause the lag when enabled? @Nyx-lol mentioned when the 'Resize Feed/Post' option was enabled it caused the lag. Which UI does the Reddit app use btw, I'm guessing the latest "mobile" version?

I develop primarily for Firefox, so that's good to hear haha

Yes it happens on the Reddit website using the actual Microsoft Edge Browser too, and yes the lag spike only happens when the 'Resize Feed/Post' feature is enabled.

The UI on the Reddit app from the Microsoft Store is just a web wrapper, so it's almost identical to the Desktop website on Microsoft Edge in PWA mode. The base platform of the Reddit app also runs on Microsoft Edge as well hence why your extension is supported with the 'app.' :D

sliceanddice9 commented 6 months ago

Does the latest update help with optimizing CPU and other system resources to reduce lag for the Reddit app & Reddit website/PWA on Microsoft Edge?

joelacus commented 6 months ago

No sorry, it was a minor fix for something else. Maybe I should start explaining the bug fixes.

I've tried to replicate the lag issue, but I can't seem to. I've tested it with Edge on Linux and in a Windows VM, and I've tested the Reddit app on Windows, and everything looks fine to me. I checked the performance charts with the Edge dev tools and they look the same whether the extension is installed with the resize feature enabled, or not. I'm kinda stumped on this tbh. The resize feature only adds some CSS styling to the page, I'm not sure what would cause the lag.

Does is only happen with pages with comments? And is it every time, or just occasionally? Do you have any links to pages you've detected the issue on I can test? You mentioned before there is no issue with Firefox, have you also tested it on Chrome? Also, what resolution is your screen?

Could you also attach a copy of your config backup please?

Sorry for all the questions, I want to try to figure this out for you.

sliceanddice9 commented 6 months ago

No sorry, it was a minor fix for something else. Maybe I should start explaining the bug fixes. I've tried to replicate the lag issue, but I can't seem to. I've tested it with Edge on Linux and in a Windows VM, and I've tested the Reddit app on Windows, and everything looks fine to me. I checked the performance charts with the Edge dev tools and they look the same whether the extension is installed with the resize feature enabled, or not. I'm kinda stumped on this tbh. The resize feature only adds some CSS styling to the page, I'm not sure what would cause the lag.

Does is only happen with pages with comments? And is it every time, or just occasionally? Do you have any links to pages you've detected the issue on I can test? You mentioned before there is no issue with Firefox, have you also tested it on Chrome? Also, what resolution is your screen?

Could you also attach a copy of your config backup please?

Sorry for all the questions, I want to try to figure this out for you.

Creating a post with keyboard input & creating a comment with keyboard input in any community either directly from the home feed or from within the subreddit itself, will cause the lag spike. Doing so on the Reddit app & Reddit website/PWA on Microsoft Edge via Task Manager drains a lot more CPU & Memory from Microsoft Edge compared to doing the very same thing on the Reddit website when using Firefox.

I do not have Chrome so I can't test how things run on Chrome. The screen resolution of my monitor is: 3840x2160.

I uploaded a video to show you just how dreadfully slow and unresponsive the Reddit app is. I've also highlighted the tab within Task Manger when using the Reddit app (which is platformed by Microsoft Edge) vs when using the Reddit website on Firefox with the tab also being highlighted as well.

Time Code:

0:01-0:46 shows the Reddit app.

0:47-01:12 shows the Reddit website on Firefox

https://github.com/joelacus/RedditEnhancer/assets/59092472/6f3cf5f7-b66f-4b3e-af27-530b8e995053

For the r/revanceapp subreddit on the Reddit app & Reddit website/PWA on Microsoft Edge, the lag is even worse because I have independently customized the r/revanceapp subreddit under 'Style > Post'. So even if I disable 'Resize Feed/Post' globally the page still lags badly.

Having said that, as mentioned earlier, when 'Resize Feed/Post' is disabled everything runs buttery smooth on the Reddit app & Reddit Website/PWA on Microsoft Edge, and when 'Style > Post' is reset to default settings for the r/revanceapp subreddit the r/revanceapp subreddit also runs buttery smooth as well.

FYI none of this was happening on the Reddit app or Reddit website/PWA via Microsoft Edge before the update to the 1.0.1 version of your awesome Reddit Enhancer add-on.

joelacus commented 6 months ago

Thanks for the video, that helps. I'm able to reproduce the lag now! It is very slow, I'm sorry about that!

I've investigated it and it does appear to be my CSS styling for the resize feature causing the lag, more specifically, the style rules using the ":has()" selector. (This allows me to select an element which has a particular child element). Whenever you interact with a web page, such as typing in an input box, web browsers will recalculate the styling and re-render the page. It seems that Edge is not as efficient with this selector, or there is some bug, causing this to lag, as it isn't an issue with Firefox or Chrome. I've tested this on both Windows 10 and 11, and it doesn't seem to be as much of an issue with Edge on Windows 11.

This makes sense now that you started encountering the lag since version 1.0. I used to use javascript to select elements on the page and apply a style to them to make the feed/post wider, but since version 1.0, I swapped out all that code for a small bit of CSS which achieves the same goal, but a lot more cleanly and efficiently, supposedly at least anyway.

So that's good I now know the issue, but I'm not sure it's something I can fix. However, I do have a work around in the mean time. I have kept the legacy code which makes the feed/post wider for older versions of Firefox which don't support the ":has()" selector. I could add a check to the extension to see if the browser is Edge on Windows 10, and make it use this code instead, basically reverting it to how it was.

I hope this makes sense and explains the issue. Again, sorry about the inconvenience. I'll try to get another update out soon!

joelacus commented 5 months ago

I've just published version 1.4.0 which should help this issue. You may still experience the lag if you use the style options, but using the resize feed feature shouldn't affect it now at least.

sliceanddice9 commented 5 months ago

I've just published version 1.4.0 which should help this issue. You may still experience the lag if you use the style options, but using the resize feed feature shouldn't affect it now at least.

Just received the update to the 1.4.0 version for Microsoft Edge which does in fact remove the lag for keyboard input when making comments or posts in the Reddit website/PWA & Reddit app with the resize feed feature enabled in the settings.

You are right though that unfortunately the lag is still present for the Microsoft Edge Reddit website/PWA & Reddit app for the 1 subreddit where I have the custom style options applied, but that's not such a big deal. If you manage to fix the style options coding as well some day that'd be great, but for now just want to express my thanks for the fix.

joelacus commented 5 months ago

You're welcome, I'm happy to hear it works, mostly.