Flutter Performance Best Practices

En iyi performans uygulamaları

Pahalı işlemleri en aza indirin

Uygulamanızın kullanıcı arayüzünü nasıl tasarladığınız ve uyguladığınız, ne kadar verimli çalıştığı üzerinde büyük bir etkiye sahip olabilir.

Kullanıcı arayüzünüzü tasarlarken aklınızda bulundurmanız gereken bazı noktalar şunlardır:

• Build() methodu ancestor(ata) widget'lar yeniden oluşturulduğunda sık sık çağrılabileceği için build() methodun da tekrarlayan ve maliyetli işlemler yapmaktan kaçının.

• Aşırı büüyük tek widgetların kullanımından kaçının. Bu widgetları daha küçük widget'lara parçalayın.

  • Bir State nesnesinde setState() çağrıldığında, tüm alt parçacıklar yeniden oluşturulur. Bu nedenle, setState() çağrısını alt ağacın kullanıcı arayüzünün gerçekten değişmesi gereken kısmına yerelleştirin. Değişiklik ağacın küçük bir bölümünde yer alıyorsa, ağacın yukarısında setState() işlevini çağırmaktan kaçının.
  • Hiç bir değişiklik olmayacak olan widgetlarınızda const ifadesini kullanın.
  • Kullanıcı arabirimlerinin yeniden kullanılabilir parçalarını oluşturmak için bir fonksiyon yerine StatelessWidget kullanmayı tercih edin.

saveLayer() methodunu dikkatli bir şekilde kullanın

Bazı Flutter kodları, kullanıcı arabiriminde çeşitli görsel efektler uygulamak için pahalı bir işlem olan saveLayer()'i kullanır. Kodunuz açıkça saveLayer() methodunu çağırmasa bile kullandığınız paketler çağırıyor olabilir. saveLayer() işlevine yapılan aşırı çağrılar, jank'a neden olabilir.

saveLayer neden pahalıdır?

saveLayer() öğesinin çağrılması, ekran dışı bir buffer ayırır ve ekran dışı buffer'a içerik çizmek, bir oluşturma hedefi anahtarını(render target switch) tetikleyebilir. Mobil GPU'larda bu, işleme verimini özellikle kesintiye uğratır.

Uygulamanızın saveLayer()'i doğrudan veya dolaylı olarak ne sıklıkla çağırdığını nasıl anlayabilirsiniz?
?

saveLayer() yöntemi, DevTools zaman çizelgesinde bir olayı tetikler; PerformanceOverlayLayer'ı kontrol ederek sahnenizin ne zaman saveLayer kullandığını öğrenebilirsiniz.

saveLayer() methodunu tetikleyebilecek ve potansiyel olarak maliyetli olabilecek diğer widgetlar:

ShaderMask
ColorFilter
Chip—disabledColorAlpha != 0xff ise saveLayer() çağrısını tetikleyebilir
Text-overflowShader varsa saveLayer() çağrısını tetikleyebilir

Opacity ve clipping kullanımını en aza indirin

Opacity widget'ını yalnızca gerektiğinde kullanın.Opacity widget'ını kullanmadan bir görüntüye opaklık eklemek için bakınız.

Basit şekilleri veya metni bir Opaklık widget'ına sarmak yerine, bunları yarı saydam bir renkle çizmek genellikle daha hızlıdır.

Kırpma işlemi pahalı olabileceği için varsayılan olarak devre dışı bırakılmıştır.(Clip.none) Belgeler clipping rectangle uygulamak yerine borderRadius özelliğini kullanmayı önerir.

Grid'leri ve listeleri dikkatli bir şekilde uygulayın

Büyük bir grid veya liste oluştururken, lazy builder methodlarını kullanın. Bu, başlatma sırasında ekranın yalnızca görünen kısmının oluşturulmasını sağlar.

İç işlemlerin neden olduğu layout(düzen) geçişlerini en aza indirin

Flutter, widget'lar üzerinden yalnızca bir layout(düzen) geçişi gerçekleştirmeye çalışır, ancak bazen ikinci bir geçiş (iç geçiş olarak adlandırılır) gerekir ve bu, performansı yavaşlatabilir.

İçsel(intrinsic) geçiş nedir?
İçsel bir geçiş, örneğin, tüm hücrelerin en büyük veya en küçük hücrenin boyutuna sahip olmasını istediğinizde (veya tüm hücrelerin yoklanmasını gerektiren benzer bir hesaplamada) gerçekleşir.

Aşırı içsel geçişlerinizin olup olmadığını belirlemek için DevTools'ta Track layouts seçeneğini etkinleştirin (varsayılan olarak devre dışıdır) ve kaç düzen geçişinin gerçekleştirildiğini öğrenmek için uygulamanın yığın izlemesine(stack trace) bakın.

İç geçişlerden kaçınmak için:

• Hücreleri önceden sabit bir boyuta ayarlayın.
• Belirli bir hücreyi "anchor" hücre olarak seçin; tüm hücreler bu hücreye göre boyutlandırılacaktır.

Kaynakklar

💙 🕊️ 💙 🕊️