-
Notifications
You must be signed in to change notification settings - Fork 408
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve performance of webui and sort table #2469
Conversation
Resolved issue: changes to to rowdata were immediately applied to the DOM. This results in a busy event loop which can cause the framerate to jitter. Avoid update in `setValue` if `val` has not changed and modify `last` in `trk` table as `val` instead of format value Move DOM updates out of synchronous table methods to syncDOM Use syncDOM to update dirty rows. Sort or refresh rows as needed Utilize new and existing sort table methods in theWebUI Cache fetched peers by torrent hash
Resovled issue: when updating thousands of torrents the UI gets unresponsive due to a busy event loop. Add a background task class which uses `requestIdleCallback` Add fallback for browsers not supporting `requestIdleCallback` Start a BackgroundTask for addTorrents and cancel previous task. After the task is done we update the DOM via `requestAnimationFrame`.
When scrolling, missing rows can become visible. Adding extra rows above and below the viewing area mitigates this artifact for moderate scrolling speeds. Remove unused maxViewRows option.
@TrimmingFool I can't merge this pull request until the next development cycle of version 4.2. There are already major changes to I already made optimizations to ruTorrent for thousands of torrents. The situation here is not dire. These changes are drastic and need to be tested thoroughly before I can even release a beta version for them. The performance gains are small for most users. Would you be interested in taking a look at the etags for plugin caching? They are broken and causing web browser caching issues. We can load ruTorrent in 300ms (3 times faster) for most users, if we fix this problem and re-enable the feature. This is the last element for near instantaneous loading times. I already optimized out everything else out including |
@stickz I also see no rush 👍
You optimized the first load time. However, this PR eliminates hanging during periodic GUI updates.
I looked into it. We could get the etag matching $etag = '"'.strtoupper(dechex(crc32($content))).'"';
// The ETag may gain encoding info. For instance: "{fingerprint}-gzip"
Utility::str_starts_with(trim($_SERVER['HTTP_IF_NONE_MATCH'], '"'), trim($etag, '"'))) Unfortunately, it seems that this is not fixed so easily. At the point where That being said, I am not interested in implementing this myself, though. |
Using Element.replaceChildren is faster than individual append/remove operations.
@TrimmingFool Could you give the |
On each
list
update,addTorrents
caused ruTorrent to become unresponsive for a short period of time. This is very noticeable when thousands of torrents are refreshed. Primarily, this was due to callingformat
insetValue
regardless of whether the value has changed.There are multiple performance improvements in this PR:
setValue
,add/remove/hide/unhideRow
,clearRows
,resize
orscrollTo
will not update the DOM immediately. Instead, changes are written topendingSync
and after delaying with a debounce of50ms
or a throttle of500ms
the DOM is updated.setValue
now considers the table cell value as dirty if theval
changed instead offmtVal
. It appears, that checking the formatted value was only done to updateLast Updated
column in theTrackers
table.refreshRows
now adds extra rows to the DOM in order to avoid blank (padding) regions becoming visible when scrolling.addTorrents
now uses a background task which is implemented withrequestIdleCallback
. Except for the first load, the task will only run during the allotted time. Due tosetLazy(true)
and the debounce of50ms
the sort table will only be updated onceaddTorrents
is done. Further,updateLabels
and other DOM updates are done after the task is done in anrequestAnimationFrame
callback.updateLabel
now avoids DOM updates if its data has not changed.matchTegs
now uses pre-initialized regular expression objects.updatePeers
now caches its values similar toupdateTrackers
.@stickz https://github.com/Novik/ruTorrent/releases/tag/v4.1-beta.1 My pleasure! At the moment I have no further changes in store.