Jittery performance on first run of animation/transitions due to shader compilations

On some apps, the first time you run a "big" animation (like a hero transition), there appears to be some jitter/jank. After the animation is warmed up, it appears to become smoother.

This is a tracking issue to investigate and solve.

Now that --release builds exist and use AOT mode, there should no longer be initial compile jitter? If you have specific traces happy to look at them!

Reopening as this is a systemic issue. Report from our mailing list: "2) First time loading shows lag, but after some time experience becomes smoother." and "Initially home screen lags for the first time only, then it gets smoother" and we recently saw it with a customer's app and their initial onboarding screens (on a Pixel, a modern phone).

@cbracken

This is a metabug for tracking these similar issues.

Fixing this is our top performance priority.

Assigning to @cbracken who is currently tasked with investigating this.

Found it lags for the first time on both Android and iOS initial start up

We're coming up with a long-term solution for this and that progress is tracked publicly on #32170 . Currently, we have a 16-page internal draft design doc with 9 different proposed solutions in it.

In shorter terms, we believe that there might be some specific issues that we can quickly solve just for iPhone X since the issue seems to be less bad on older iPhones. We're currently purchasing iPhone X to add to our device lab so we can debug the performance of iPhone X: #34590

#32170

This is not only an issue on the iPhone X. We have done testing on the Pixel 3 and other android devices and have found the same effect.

@michinchin

@michinchin : we're aware of that hence #32170 is not just for iOS, but also for Android, Fuchsia, Desktop, and probably all platforms that Flutter directly compiles into binaries.

iOS currently just has additional issues. For example, we can store binary persistent shader cache on Android, but we can only store GLSL persistent shader cache on iOS. That requires iOS to do one more compilation (compared to Android). For that, we're also enabling Metal backend for iOS which should help this specific issue.

@liyuqian

@liyuqian thank you for the updates. Currently (and because I’m an iPhone X user) I immediately noticed it and I must say that despite of being an issue already tracked, it bothers me somehow to have a production app that launches on a scroll screen where it always feel janky as the user starts it on iPhone for the first 2 seconds.

Oddly and in my experience, it seems to affect only the iOS. Android devices were I’ve tested it, seem to be good and smooth right from the launch point.

@miguelcmedeiros

@miguelcmedeiros : that's exactly the difference between binary persistent shader cache and GLSL persistent shader cache. On Android, there's 0 work if you close the app and re-open the app. On iOS, re-opening the app triggers another GLSL to binary compilation.

@liyuqian

@liyuqian got it. Do you have an idea of when a fix may be available? Have you already found a solution for it or still drafting for?

PS: You've tagged the wrong person. 😄

Oops. We haven't picked which solution to pursue. Will update #32170 with some proper time estimation once we made the decision.

@liyuqian

@liyuqian Any news on this?

I'm experiencing jaggy animations every first time i do:

Navigator.push(MaterialPageRoute(fullscreenDialog: true, builder: (context) => SomePage()));

Second time i open a page, it' much smoother.

I'm on an iPhone 7.

flutter --version
Flutter 1.15.18 • channel dev • https://github.com/flutter/flutter.git
Framework • revision 9437639590 (31 hours ago) • 2020-03-06 10:24:23 -0800
Engine • revision 5aff311948
Tools • Dart 2.8.0 (build 2.8.0-dev.12.0 9983424a3c)

@erf

@erf : we're actively working on SkSL shader warm-up. Some preliminary results on iOS should be available in 1-2 months.

For progress, please check #32170 . We'll be referencing it when we're making smaller fixes.

@liyuqian

@liyuqian i feel the performance has been improved in the latest dev version 1.16.3 ..?

@erf

@erf : it's nice to hear that! We're always working hard to improve the performance. While #32170 isn't fixed yet, we've made at least 13 other quantified improvements between Sep 2019 and Dec 2019.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Jittery performance on first run of animation/transitions due to shader compilations #813

86 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Jittery performance on first run of animation/transitions due to shader compilations #813

Description

Activity

eseidelGoogle commented on May 13, 2016

sethladd commented on Oct 11, 2017

Hixie commented on Dec 20, 2017

86 remaining items

michinchin commented on Jun 20, 2019

liyuqian commented on Jun 20, 2019

michinchin commented on Jun 20, 2019

liyuqian commented on Jun 20, 2019

miguelpruivo commented on Jun 20, 2019

liyuqian commented on Jun 20, 2019

miguelpruivo commented on Jun 21, 2019

liyuqian commented on Jun 21, 2019

erf commented on Mar 8, 2020

liyuqian commented on Mar 10, 2020

liyuqian commented on Mar 26, 2020

erf commented on Mar 30, 2020

liyuqian commented on Mar 30, 2020

lock commented on Apr 15, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions