Poor scrolling performance with ListView holding complex widget trees. #66902
Comments
SwissCheese5
changed the title
|
related to |
|
Hi @SwissCheese5 |
darshankawar
added
in triage
waiting for customer response
and removed
created via performance template
labels
|
@darshankawar I believe #52207 is the only related issue to mine. The first one is unremarkable, and the last one has too little information to tell. |
darshankawar
added
f: scrolling
framework
perf: speed
severe: performance
and removed
in triage
labels
|
Related to #28204 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've made two very complex apps so far, and they both seem to have incredibly poor scrolling performance, even in small list sizes.
My biggest problems with flutter so far have been that there are no guidelines on how to deal with list view performance given a complex widget tree for each child
The first app has a single list view where each child is very complex. The second is a tree of listviews. Every child has a child list view, recursively (its a comment section. almost identical to reddit).
BOTH of these apps have the following behavior:
https://youtu.be/w3XaqdaT6Vw
This video is recorded in Release mode on my Samsung S9. You can see the particles slow down, indicating FPS drops. The particles are not the source of the slow down.
Based on that list of behavior, I have to assume that the widgets are not getting rebuilt and optimized as much as possible, and there's something Flutter is doing that is causing the FPS to stay dropped even while idle.
The reason I can't share my code easily is that it is far too complicated and intertwined, I'd have to show the entire app for anything to make sense. So in the spirit of good faith, I want this issue to be long-running so that I can get guidance to diagnose the scrolling performance.
Here is the comment class that you see in the video.
https://gist.github.com/6d51d085fc6825698fb03bf00b0d98e3
You can see I'm using ImplicitlyAnimatedListView. I don't want that to be the focus, because in my other app, I use a normal Flutter AnimatedListView with the exact same result.
I know this class is too much code to process, but the main part you should focus on is line 575
BranchChildrenIt's just a list view of the widget itself, creating a comment chain.
Replacing ImplicitlyAnimatedListView with a normal ListView of course reproduces the exact same results.
Flutter analyze:
Flutter doctor -v:
Flutter run --profile --skia-trace:
Here's a video with flutter run --profile --skia-trace and with the timeline enabled:
https://youtu.be/LFg9-Z9bGJk
Next, here is my Observatory timeline trace WITH PARTICLES:
https://gist.githubusercontent.com/SwissCheese5/b74244944b67b44580ee2fafa0bfc56d/raw/3d91e80686955089081bbf048dadae705b77856e/dart_timeline
And here's the Observatory timeline trace WITHOUT PARTICLES:
https://gist.githubusercontent.com/SwissCheese5/cfe674a5c65dac9b2826b632abfac50f/raw/6725dec7c70fea2ac5b103d59a2f8851509de89b/dart-timeline%2520no%2520particles
(same results, the particles are not the cause of the slowing down)
The timeline says Clipping is the thing thats taking the most time, but the only clipping I'm doing is with the profile pictures
Here's a picture of my Memory timeline while the app was idle + scrolling after a minute. Scrolling has no impact on memory, the spikes were occurring during idle as well.
Treemap view:
The text was updated successfully, but these errors were encountered: