“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”
I. Keframe feedback and upgrade
It was released earlier this month and is open source! The Keframe, the fluidity optimization component of the Flutter, has received 200+ Star so far and has received a lot of feedback.
It also seems to have a good experience on the Web side
All the five issues raised have been followed up and solved. One of the functional bugs is that placeholder will not disappear in some scenarios, which has been solved. Just use the latest version 2.0.2 or 1.0.2.
At the same time, I also got the actual optimization effect of many excellent developers, I collated and shared with you the actual keframe landing case, and included in flutter_ApodiDAE (optimization collection in Flutter, to share various optimization techniques).
Two, collection display
Note: The demo is recorded in the development stage and may not be online yet.
1. One-second voice packet changer App
RuiyuIndependently developedOne second voice packet changer, the total market downloads of more than 100W, won the Huawei Star App award
Here’s a comparison of 300 frames before and after using KeFrame:
Lag frames were optimized from an average of 60 frames to one in 300 frames, slight lag frames were optimized from an average of 7 frames to none, and flow ratio increased from 36.3% to 74.7%.
The data show Mate30 pro
Test model: Mate30 Pro
| Before optimization | The optimized |
|---|---|
 |
 |
| Before optimization | The optimized | |
|---|---|---|
| The average number of frames with a frame lag | 60 | 300 |
| The average number of frames with a slight lag | 7.0 | There was no slight lag |
| Most time consuming | 146.0 ms | 76.0ms (incorrectly shown in figure) |
| The average time | 25.2 ms | 18.3 ms |
| Fluid frame ratio | 36.3% | 74.7% |
Operating Demo (GIF frame rate is only 25)
| Before optimization | The optimized |
|---|---|
 |
 |
In this Case, the lag occurs mostly in the tab-switching scene. Because the system will render the page in an instant, if the page structure is complex, on high-end devices like the Mate30 Pro can also cause lag. Keframe is used to load each module in the page by frame, which can effectively optimize the lag of switching. And from a somatosensory point of view, the whole transition is still very natural.
2. Anonymous A Island
Elk, a struggling indie developer, has many beautiful apps on the AppStore and GooglePlay
Developer feedback:
This is A third party client project of A Island which has just started. After matching with Keframe frame, it has an amazing performance on the test machine (LeEco 1S), and the effect is compared to “brutal”.
Data show LeEco 1S & iPhone 11
The following is the comparison of 100 frames before and after using KeFrame. The test model is LeEco 1S.
| Before optimization | The optimized |
|---|---|
 |
 |
I don’t think there’s any need to explain this optimization. The entire App went from almost unavailable to zero lag at 100 frames. This is where keFrame optimizations are most valuable, allowing complex pages to go from stammering to running smoothly on low – and mid-range devices.
The demo data on the iPhone11 is also available
| Before optimization | The optimized |
|---|---|
 |
 |
Better performance devices have almost no lag themselves, and KeFrame further ensures that each frame is smooth.
Operating Demo (GIF frame rate is only 25)
| Before optimization | The optimized |
|---|---|
 |
 |
 |
 |
3. Lark creation
This is a still in the development stage of the App, hope to do a simple but not simple, free and safe professional code word software.
Data show mi 9
Here is the comparison of 300 frames before and after using KeFrame, test model: Mi 9.
| Before optimization | The optimized |
|---|---|
 |
 |
The peak of clocking was reduced from 244.0ms to 126.0ms, the average clocking was optimized from 50 frames to 150 frames, and the average time of 300 frames was optimized from 22.4ms to 18.5ms.
Operating Demo (GIF frame rate is only 25)
| Before optimization | The optimized |
|---|---|
 |
 |
For more usage of keFrame, see:
Github: github.com/LianjiaTech…
Pub check: pub. Dev /packages/ke…
Dont forget star !
My use skills
In my daily experience, for some paging lists, I would set the ListView cacheExtent to 700, along with a gradient animation, to significantly optimize the experience on low – and mid-range devices, while on high – end devices the user would hardly notice the load.
For pages with limited list items like details, I’ll go straight to Double. Infinity with cacheExtent, and open the page to load in frames for the best scrolling experience.
Thanks again to the three developers who provided the case. I can feel that each developer has put a lot of effort into their app, and they have done a very beautiful job.
Finally, you are welcome to share your optimization demo or optimization tips. I will include all of them in flutter_Apodidae at candy 🍬
In the next series, I expect to spend 4-6 periods from the principles of computer network, to the network programming in Dart, and finally to the architecture design of Dio. Through principle analysis and practice, I will take you to master the network programming in Dart and the design of Dio library from the shallow to the deep.
If you have any questions or suggestions, please feel free to contact me in the comment section or the official account, or issue or PR.
Public account: Advance Flutter or Runflutter collects the most detailed guide to advance and optimization of Flutter, welcome to follow.