IONIC framework Mobil Uygulama Performansı Sorun

Question

IONIC çerçevesini kullanarak müşterilerimizden biri için yüksek profilli bir mobil uygulama geliştiriyoruz. Neredeyse bu aşama için geliştirmeyle işimiz bitti. Web/Mobil Tarayıcı'da açıldığında uygulama iyi çalışıyor gibi görünüyor. Ancak, bunu çerçeve komutlarını kullanarak bir mobil uygulamaya yüklediğimizde, uygulama çok yavaşlar ve çok fazla sıkışır. Bu çok zayıf bir kullanıcı deneyimi ile sonuçlanır.

APK'yı oluşturmak için "iyonik android çalıştır" komutunu kullanıyorum. Bu konuda bize yardımcı olabilir misiniz? Bu sorunla ilgili test için APK'yı gönderemiyoruz. Uygulamayı hızlandırmak için kullanabileceğim herhangi bir yapılandırma var mı?

Ayrıca, sayfalarımın çoğunda bir İyonik Yükleyici ekledim. Davranış çok tutarsız (yalnızca bazen görünür). Bu, kötü bir kullanıcı deneyimine katkıda bulunur.

Answer 1

Hangi İyonik Yükleyici kullanıyorsunuz? Mevcut çözümlerden memnun değildim ve kendi çözümümümü yuvarladım.

Hangi sürümü hedefliyorsunuz ve hangi sürümü (fiziksel aygıt) ile test ediyorsunuz? < 4.4 hedeflemesi

1. ve APK boyutu daha sonra yaya geçidi çalışma zamanını donatılacak deneyin bir sorun değildir:

   İşte bazı performans ipuçları. İyonik uç ile oldukça kolaydır, sadece içermek için ionic browser add crosswalk yapabilirsiniz. Performans daha iyi olacak, ancak APK boyutu daha büyük olacak.

2. ionic run android bir APK yapacak, ancak sizin gulpfile.js yılında ionic build android

3. küçültme JS ve CSS, concat ve şerit hata ayıklama yapmak çok daha iyidir. Ayrıca, şablonlarda html2js'yi kullanarak küçük bir performans artışı elde ettim.

4. ng-repeat'a dikkat edin. Yerine collection-repeat kullanın veya ng-repeat kullanmanız gerekiyorsa, track by özelliğini kullandığınızdan emin olun.

5. Filtreler, performans üzerinde olumsuz bir etkiye sahip olabilir. Mümkünse direktifleri kullanın.

6. Defer defer defer! $q arkadaşınız ve hız yanılsamasına yardımcı olabilir.

7. Sadece düz ol 'DOM'u kullanabilirsiniz, her şey Açısal olmalı.

8. Mümkün olduğunda bir kerelik ciltleme kullanın. {{ ::thing }} değeri bir kez belirler ve daha az gözlemci anlamına gelir ve bu da daha iyi performans anlamına gelir.

9. $scope.$apply()'dan kaçının, bu her şeyi işler. Bunun yerine $scope.$digest() kullanın ve yalnızca çağrıldığı alandan işlenecektir.

10. $$watchers numaranızı en düşük düzeyde tutun!

11. Sadece ihtiyacınız olanı paketleyin. vb kütüphaneler açısından yürütmem dahil emin olun

12. (bu bariz olmasına rağmen)

İyi şanslar jQuery kullanmayın!

Answer 2

Güncelleme 09/17/2015

yaya geçidi ile Cordova'nın entegrasyon bugünlerde mükemmel çalışır ve test etmek ve Android için uygulama oluşturmak için kullanılması önerilir.

---

Darryn.ten cevabı kesinlikle çok detaylı ve birçok büyük ipuçları içermektedir. Yukarıda belirtilen ne birkaç şey eklemek istiyorum:

• yaya geçidi. Bu, büyük performans iyileştirmenin ana aracıdır (Android 4.4 <'da yerleşik Chromium tarayıcısına sahip değildir). İyonik klibi kullanarak yaya geçidi takmak hatalara ve hatalara neden oluyorsa (hemen hemen kesinlikle gerektiği gibi), Intel XDK'yı indirin ve Crosswalk kullanarak uygulamanızı kolayca test edebilir/debug edebilir/oluşturabilirsiniz. Bazı büyük performans sorunu neden şahit oldum
• Bir şey daha ben genel donukluk performansı hakkında hala emin değilim ama almış bu iki kaydırma ve geçiş süper hızlı gitti arka plan resimleri ve geçişlerini.
• DOM'ın etrafındaki nesneleri taşımak için donanım tabanlı css (translate3d) kullanın.

Hibrit uygulamalar hala onların olmasını istediğimiz kadar değil, ama umarım en yakın zamanda doğru şekilde gidecektir.