-
Notifications
You must be signed in to change notification settings - Fork 28.9k
Description
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:
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
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)