Scrolling Performance
Creating this issue based on !977 (closed) and the problems with it.
The problem:
the more you scroll, the more your timeline gets filled with content, DOM gets bloated, Vue has more work when updating the also bloated virtual dom, and the browser has more work when updating the actual dom, as well as when doing the layout and all that stuff. I did some testing with modified code to confirm this, you can basically load thousands of statuses into memory of the application but only display ~100 of them, and the performance when scrolling doesn't really drop at any point, even with thousands of statuses. This is without cleaning up the application memory from old statuses, just the views only showing a smaller part of them. This completely confirms my guess that the performance issues do not come from memory, but excessive v-dom/dom.
Suggested fix:
Virtual scrolling, as you scroll the timeline keeps track of statuses not in view, needs to keep track of the edges of the hidden parts as well as the height of them. Only the visible statuses are rendered as statuses, and the hidden statuses on top/bottom just as a block with the height of the hidden statuses they represent. When you scroll up/down, the hidden statuses height is decreased/increased and the visible statuses slice moves accordingly. The only real issue with this is when you resize the window, the height of statuses can change and the stored heights of hidden statuses don't match to their real height anymore, however I believe this can be remedied by doing scroll offsets based on the old stored hidden height of a status and the actual current rendered height of it when the hidden statuses are turned into real ones.
Some requirements for the implementation:
- It should be something that we can enable without making it an option, as in it doesn't make the experience worse.
- Keeping track of visible statuses should be done in a way that doesn't get more expensive the more you have, which means you can't just have scroll listeners for each status, it won't go well with thousands of them.
- Needless to say, the solution shouldn't have to mess with the application state stored with vuex, it should be purely handled by view components.
- Scrolling both up and down shouldn't feel different even when status hiding/unhiding is being done, scrolling shouldn't be locked and it shouldn't jump in unintended ways.