Hi, Hello everyone , This is Chengxiang Moying ！

Yes , I remember the password of the official account number  ！

I’ve been in the pit recently Flutter, It coincides with Flutter Release 2.0, Formal full platform support , Then I’ll share some Flutter Relevant technical points , Today we start with const Widget This is a small optimization point . Take a look at its principles and limitations .

stay Flutter in , is ” Everything is Widget”, and Widget The essence is the configuration of a set of information , It can be UI Exhibition , It can also be gestures 、 Navigation and other functions support . but Widget Designed to be immutable , Any change is made by destroying / The reconstruction has been modified , stay Widget Behind the immutability , Depend on Element variable / Reusable support , therefore Flutter take Widget The design is extremely lightweight , The cost of rebuilding is very low .

Some optimization techniques mention , In the build Widget When , have access to const Widget, To get a similar 「 cache 」 The effect of . although Flutter It will reuse as much as possible Element, But if we cache directly Widget, Every reuse Widget, At least save Widget build Steps for .

But this const widget The optimization of the point , What is the principle behind it ？ Is the benefit of optimization big ？ Is it worth focusing on ？ Let’s talk about this today .

One 、const Constant

At the beginning of giving const add Widget front , Let’s start with Dart Linguistic const Keyword start .

Speaking of const, I have to mention something similar to it final, They all have the semantics of constants , That is, once assigned, it cannot be modified .

The difference is ,const Is a compile time constant , use const Constant decorated , Must be initialized at declaration time , And it’s a determinable value . and final Is the runtime constant , use final Constant decorated , Must be initialized at declaration time , Or initialize in the constructor , But its value can be calculated dynamically .

Don’t talk much , We last Demo It’s clear .

We use const When declaring class construction methods , Its related fields , Must be final Of , That is, after setting , It doesn’t change .

So one Dart Class object , Whether to allow const Modify to constant , Depending entirely on the class declaration , Whether the construction method is const modification .

As you can see from the above example , When using const Tectonic Point Object time , As long as it’s in the same parameter , You get the same object , For example ,p1 == p2 Output is true.

And once Point When the input parameters are different ,const And the objects after that are different , For example p2 == p3 The output of false.

Okay , I won’t take you through the logic , Let’s compare the code and output carefully .

Mentioned earlier ,const Keyword modified constants , It must be a value that can be determined initially , That is to say, the assignment must also be a constant . For example, I’ll modify it a little bit const Point() Input , Let it get it from a method , This leads to compilation failure .

Come here , We can come to a conclusion ： Use const Modifying constant objects , As long as the input parameters do not change during construction , We can get the same object .

The principle behind this , It’s nothing more than Dart VM The constant pool is implemented internally , Reuse the same objects with the Heyuan pattern .

Two 、const Widget

Speak clearly Dart Medium const The meaning of and how to use , Next, we will Widget add , have a look const Widget The principle of optimization .

stay Flutter in ,Widget Essence is just an element of information configuration , It’s defined as immutable , Any change reflects destruction & The reconstruction . and Widget The reason why immutability doesn’t affect efficiency very much , It’s because Element Realized with Widget The abstraction of change . That is, although Widget Will be rebuilt , however Widget Behind the scenes Element, But it’s reused .

meanwhile Flutter Framework, It has its own update strategy , Make sure Widget Change at the same time , Reuse as much as possible Element object .

The logic of this strategy is Element Of updateChild() In the method , The method in Element It’s very important to build and update trees . We only care about the update process here , The father Element Node already has a child Element The node .

Father Element Node passing updateChild() Method , Judge how to deal with your own children Element node , Is new 、 to update , Or just remove it .

from updateChild() We can see that ,Element According to the new Widget When it’s updated , Will try to reuse the existing sub Element node , When it cannot be reused , Will pass inflateWidget() Create a new child Element node .

updateChild() Yes 3 Input parameters , One of the key things is child and newWidget, They mean old respectively Element Child nodes and new Widget object .

Element It also holds Widget object , if child Held widget and newWidget When equal , Old and new Widget There is no change ,updateChild() The logic is direct reuse child, I.e. old Element, No extra work will be done .

So if our Widget Defined as const, stay updateChild() Update phase , Old and new Widget It’s the same object , It will not be rebuilt Widget, Behind it Element It will not be updated , Nature can play the role of cache reuse , Speed up the efficiency of building .

3、 … and 、const Widget Are you going to make a big profit ？

All optimization techniques are means , The optimization effect behind is our ultimate goal . A crazy operation , The output is not obvious , This is definitely not what we want .

that const Widget Is the effect of optimization obvious ？ It’s worth while we write code , Think about it , Is it necessary to use it in the current scene ？

Come to the conclusion first ： Don’t have to .

Since it’s optimization , A test, of course , Take the measured data , It’s the most important . Here I found @Cirzant Lai An example of sharing , It’s a good explanation , And then I’ll share some of my thoughts .

3.1 Look at the data

Here is a small program , Explicitly a random display Image.

That’s what we’re interested in Image Whether to use const Keyword construction for comparison .

Here’s how to use const Part of the code for the keyword .

const Image（
  width：100,
  height：100,
  image：AssetImage（'assets/logo.png'）,
）

Another reference program is not used const keyword .

This Image adopt AnimatedPositioned parts , Update location once per second . And then use --profile Mode to run the program , And pass Dart DevTools Observe its “performance” and “memory”.

For the sake of analytical rigor , An older device was used for testing ：Sony Xperia Z2, If Flutter It’s still very easy to keep it on this device 60 Frame speed , It means that Flutter The optimization itself is already very good .

In addition to the equipment , To make the test data more obvious , There’s a gradual increase here Image The number of icons , When added to 1000 Time , The rendering time per frame is 80ms, It is about 12.5 FPS. I don’t think it’s necessary to continue to increase the number , This test is based on 1000 As boundary , Take… Separately 10、100、1000 Three sets of data , have a look “performance” and “memory” The performance of separation .

GPU & UI：

Memory：

As you can see from the data shared above , When Image Yes 1000 When it’s time ,FPS I’ve been promoted 8.4%, Memory usage is down 20%. Although this data seems very obvious , But in practice ,2 There was no significant difference in fluency between the two tests .

in addition , We put it on a screen 1000 individual Image It’s not realistic , For most applications , Each screen can have dozens of Widget, It’s very rich . And if you need a lot of rendering , It’s better to use it directly Canvas Drawing improves efficiency , Not dependent const Widget This little bit of optimization .

3.2 const Yes GC The optimization of the

stay Flutter in ,Widget As configuration information , It’s designed to be very lightweight , To adapt to frequent destruction and reconstruction , This operation will inevitably lead to the old Widget Recycling of objects .

When we do const When the keyword declares a constant , Behind it is the concept of constant pool , take const Is cached in the constant pool , For subsequent reuse .

Constants have a longer life cycle for ordinary objects , It’s good and bad . The good thing is that constant objects do GC Not so sensitive , That is, it doesn’t need to be triggered frequently GC. The disadvantage is that the declaration period in constant pool is longer , It may result in the cache of infrequently used objects , There is no right time to release , Causes excessive memory usage .

Measured down ,const Indeed. GC There are some effects .

Here is the example from the previous article , Constantly create small Widget, In the end, we use const Before and after the occupancy of memory . You can see the use of const modification Widget after ,GC Less , And it’s smoother .

Summary

Here we should know , Use const Embellished Widget, Indeed. Flutter Of build There are some optimizations in the process , But optimization is not obvious . In use , We just need to use it on demand , There’s no need to pursue a lot of const turn .

A final summary , about Dart language .

1. One Dart Class objects can be used const modification , It depends on whether the constructor of the class is const modification ;
   
2. Use const In the construction method of modification , All members must be final modification ;
   
3. structure const Object time , It must also be const The constant ;
   
4. const Modifies the constructor , There can be no method ;
   

about Flutter Come on ,const The optimization point of decoration ：

1. Reuse with constant pool Widget, In the frequently updated Widget Scene , It has the function of optimization , Avoided Widget Recycling and reconstruction of the city ;
   
2. const Yes GC There is a certain inhibition around , In a scenario where a large number of identical objects will be created , There are fewer objects created , natural GC It’s going to be less ;
   

— End —

Ink shadow bearing fragrance

I’m Chengxiang Moying ,8 I’m a skilled old driver . ad locum , Mainly share my own original content , It’s not just about technology , In the workplace 、 product 、 Design ideas and so on , All have . There are a lot of friends here , Welcome to ！

321 Original content
<!– –>

official account

References:

• https://medium.com/nerd-for-tech/flutter-performance-analysis-of-const-constructor-d2a72fd8a043
  
• https://stackoverflow.com/questions/53492705/does-using-const-in-the-widget-tree-improve-performance/53493390#53493390
  
• https://stackoverflow.com/questions/52581148/when-is-const-optional-in-dart-2
  
• https://dev.to/pedromassango/flutter-performance-tips-1-const-constructors-4j41
  
• https://mp.weixin.qq.com/s/eSbdGBUAP50uL8kn5axFSQ
  

Did this article help you ？ Leaving a message. 、 forward 、 Some good-looking Is the greatest support , thank you ！