这是indexloc提供的服务,不要输入任何密码
Skip to content

List scrolling is not smooth #43083

@zsunkun

Description

@zsunkun

There is a list page in our application. I found that didn't scroll smoothly when I finished the page.So I tried to analyze it by using Timeline(device:HUAWEI P10).Then I found two problems:

Q1:UI Thread cost much time to build remain list items when the list scrolls for the first time.
This is Timeline:
dart-timeline-2019-9-20_first_scroll.json.zip
Deep levels, traversal takes much time:
image
Although I can avoid it by preload list items, but I don't think this is a good idea. I think my page requirement is not very complicated.But when I implemented this requirement, I found that the Widget has such a deep level and cost time.Is my usage incorrect? If not, when I have a more complicated requirement later, what should I do? I can't rely on preload.

Q2:GPU Thread's problem.After all the items are cached, we can ignore the time spent by the UI thread, UI Thread only cost 2~3ms average,GPU Thread cost 11ms average. It still not scroll smoothly in feel.But Timeline shows list performs well without dropping frames,Timeline like this:
dart-timeline-2019-9-20_cached.json.zip
image

I used suspected that there are some problems in PointeEvent processing or animation simulation. But I found that if I replace the list item with a simpler layout, it gets smoother. Because of the item cache, they spend almost the same time on the UI thread.The only difference is the GPU Thread.So I think the page will become smooth if I can reduce the time spent on GPU thread.But I didn't find a place to optimize.Any suggestions appreciated!

I simplified the page code into a demo, hope it is useful.SourceCode:
list_demo.zip

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel bd_1.5.4, v1.5.4-hotfix.3-pre.75, on Mac OS X 10.13.6 17G2208, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
✗ Android license status unknown.
Try re-installing or updating your Android SDK Manager.
See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed
instructions.
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.5)
[✓] Android Studio (version 3.0)
[✓] Connected device (1 available)

Metadata

Metadata

Assignees

Labels

a: typographyText rendering, possibly libtxtc: performanceRelates to speed or footprint issues (see "perf:" labels)engineflutter/engine repository. See also e: labels.f: scrollingViewports, list views, slivers, etc.

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions