Flutter in the previous article the thinking and practice of dynamic hot update (6) – dynamic list rolling optimization introduces the dynamic performance problems encountered in the process of the implementation list, was also made a optimized scheme, in fact, the end result is not very ideal, recently took time and specific to do analysis and optimization of the new version.

1. The crux of the problem

For list scenarios, performance is affected because the Runtime performs a lot of logic every time a new list item is created, causing a lot of resource overhead and affecting the render frame rate. Then I reviewed the original template code and found that there were some problems in the original template code that needed to be optimized:

  1. The first problem is that there are a lot of redundant codes. This template code is automatically generated by a tool we developed internally. This tool is not mature yet, resulting in a lot of redundant codes generatedWidgetThese redundanciesWidgetNode will giveRuntimeParsing brings additional stress.
  2. The second problem is that every time a new list item is created, the content of the list item is obtained dynamically through Bloc. Because the business data returned from the interface cannot be displayed directly, some additional processing is needed, which results in dynamic operationRuntimeThis part of the processing logic is executed dynamically each time.

2. Optimization scheme

After analyzing the crux of the above problems, the corresponding optimization ideas are also available.

To solve the first problem, remove all the widgets in the template code that are useless, as well as all the Widget properties that are useless, to reduce the Runtime parsing as much as possible.

Let’s focus on the optimization idea of the second problem, which is to remove the additional logical part that needs to be executed every time a new list item is created, provide a UI data model, and prepare the UI data that needs to be displayed in advance. When rendering UI, it is good to directly assign UI data to values, instead of temporarily processing UI data during rendering. The concept of UI data Model and business data Model is often used in project development.

For the idea of constructing UI Data Model, we want to further abstract out a more general Model called Data Sockets, which is divided into two parts:

  • Data Plug: A UI component has a Data Plug that defines the Data fields that the UI component can receive
  • Data Socket: Analogous to a datapool or Data stream, the UI component uses its own Data Plug to receive Data from the Data Socket, just like a Plug on a plugboard.

Based on the above two concepts, we redesigned the data rendering method in dynamic list:

In the new design, we define DataPlug of some basic UI components, and define identifier of sub-UI components when building list item UI, which is equivalent to the jack on the plug board. After obtaining the business data Model from the interface, we started to combine and build DataSockets. The structure of DataSockets is shown in the figure:

{
    "identifier1": {},
    "identifier2": {},... }Copy the code

When the UI list is rolling to create a new list item, it obtains data from DataSockets matching its own DataPlug according to the UI component identifier, eliminating other additional logical judgment and directly performing data assignment, thus optimizing the UI rendering efficiency.

Take a look at the optimized results ^ ^ :

The smoothness of scrolling through the list is within the acceptable range, the silky slide, palsy ~

Let’s compare the scrolling effect before last optimization:

The improvement is obvious.

Finally, compare how native template code works:

It’s pretty close to native FPS.

3. Afterword.

DataSockets is not a new concept. If you are familiar with MVVM, you can find the same pattern as MVVM DataBind. We borrowed the idea and tailored a model to meet our business needs based on the characteristics of Dart and Flutter. This optimization is practical, for the first time this mode, the abstract is not mature enough, we had the abstract this pattern has a purpose, is what we are internal development of App design tool, the future want to implement the business logic function of visual editor, also is at present relatively popular in the concept of low code or no code, convenient and the developers can also develop the App, See The Microsoft Power Platform for more information. If you are interested, please leave a comment in the comments section