Firebase Performance Monitoring ile yükleme süresini ve ekran işlemeyi ölçün

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

1. Giriş

Son Güncelleme: 2021-03-11

Neden Görünümlerin performansını ölçmemiz gerekiyor?

Görünümler, kullanıcı deneyimini doğrudan etkileyen Android uygulamalarının önemli bir parçasıdır. Örneğin, Etkinliğiniz veya Parçanız, kullanıcıların etkileşimde bulunduğu Görünüm bileşenlerini tutan Kullanıcı Arayüzünü içerir. Kullanıcılar, tamamen ekranda çizilene kadar kullanıcı arayüzünün tüm içeriğini göremezler. Yavaş ve donmuş ekranlar, uygulamanızla kullanıcı etkileşimini doğrudan bozacak ve kötü bir kullanıcı deneyimi yaratacaktır.

Firebase Performance Monitoring, bu performans ölçümlerini kullanıma hazır sağlamaz mı?

Firebase Performance Monitoring, uygulamanızın başlangıç ​​zamanı (yani, yalnızca ilk Etkinliğinizin yükleme süresi) ve ekran oluşturma performansı (yani, Etkinlikler için yavaş ve donmuş kareler, ancak Parça). Ancak, endüstri uygulamalarında genellikle çok sayıda Aktivite yoktur, bunun yerine bir Aktivite ve birden fazla Fragman bulunur. Ayrıca birçok uygulama, daha karmaşık kullanım durumları için genellikle kendi Özel Görünümlerini uygular. Bu nedenle, uygulamanızda özel kod izleme araçları kullanarak hem Etkinliklerin hem de Parçaların yükleme süresinin ve ekran oluşturma performansının nasıl ölçüleceğini anlamak genellikle yararlıdır. Özel Görünüm bileşenlerinin performansını ölçmek için bu kod laboratuvarını kolayca genişletebilirsiniz.

ne öğreneceksin

  • Bir Android uygulamasına Firebase Performance Monitoring nasıl eklenir
  • Bir Aktivitenin veya Fragmentin yüklenmesini anlama
  • Bir Aktivite veya Fragmanın yükleme süresini ölçmek için özel kod izleri nasıl alet edilir?
  • Ekran Oluşturmayı ve Yavaş/Donmuş karenin ne olduğunu anlama
  • Yavaş/Donmuş ekranları kaydetmek için özel kod izlemeleri metriklerle nasıl alet edilir?
  • Firebase konsolunda toplanan metrikler nasıl görüntülenir?

Neye ihtiyacın olacak

  • Android Studio 4.0 veya üstü
  • Bir Android cihazı/emülatörü
  • Java sürüm 8 veya üzeri

2. Kurulum

kodu al

Bu codelab için örnek kodu klonlamak için aşağıdaki komutları çalıştırın. Bu, codelab-measure-android-view-performance adlı bir klasör oluşturacaktır:

$ git clone https://github.com/FirebaseExtended/codelab-measure-android-view-performance.git
$ cd codelab-measure-android-view-performance

Makinenizde git yoksa, kodu doğrudan GitHub'dan da indirebilirsiniz.

measure-view-performance-start ​​projesini Android Studio'ya aktarın. Muhtemelen bazı derleme hataları veya eksik bir google-services.json dosyası hakkında bir uyarı göreceksiniz. Bu adımın sonraki bölümünde bunu düzelteceğiz.

Bu kod laboratuvarında, Android uygulamamızı bir Firebase projesine kaydetmek ve gerekli Firebase yapılandırma dosyalarını, eklentileri ve bağımlılıkları Android projemize eklemek için Firebase Assistant eklentisini kullanacağız - hepsi Android Studio içinden !

Uygulamanızı Firebase'e bağlayın

  1. Android Studio'nun ve Firebase Assistant'ın en son sürümlerini kullandığınızdan emin olmak için Android Studio / Yardım > Güncellemeleri kontrol et seçeneğine gidin.
  2. Asistan bölmesini açmak için Araçlar > Firebase'i seçin.

e791bed0999db1e0.png

  1. Uygulamanıza eklemek için Performans İzleme'yi seçin ve ardından Performans İzleme'yi kullanmaya başlayın ' ı tıklayın.
  2. Android projenizi Firebase'e bağlamak için Firebase'e Bağlan'a tıklayın (bu, tarayıcınızda Firebase konsolunu açacaktır) .
  3. Firebase konsolunda Proje ekle 'yi tıklayın, ardından bir Firebase proje adı girin (zaten bir Firebase projeniz varsa, bunun yerine mevcut projeyi seçebilirsiniz) . Firebase projesi ve yeni bir Firebase Uygulaması oluşturmak için Devam et ve şartları kabul et'i tıklayın.
  4. Ardından, yeni Firebase Uygulamanızı Android Studio projenize bağlamak için bir iletişim kutusu görmelisiniz.

42c498d28ead2b77.png

  1. Android Studio'ya döndüğünüzde, Asistan bölmesinde, uygulamanızın Firebase'e bağlı olduğuna dair onay görmelisiniz.

dda8bdd9488167a0.png

Uygulamanıza Performans İzleme ekleyin

Android Studio'daki Asistan bölmesinde , uygulamanıza Performans İzleme Ekle'yi tıklayın.

Gerekli tüm bağımlılıkların eklendiğinden emin olmak için Android Studio'nun uygulamanızı senkronize etmesi gereken Değişiklikleri Kabul Et için bir iletişim kutusu görmelisiniz.

9b58145acc4be030.png

Son olarak, Android Studio'daki Asistan bölmesinde tüm bağımlılıkların doğru şekilde kurulduğuna dair başarı mesajını görmelisiniz.

aa0d46fc944e0c0b.png

Ek bir adım olarak, "(İsteğe bağlı) Hata ayıklama günlüğünü etkinleştir" adımındaki talimatları izleyerek hata ayıklama günlüğünü etkinleştirin. Aynı talimatlar kamuya açık belgelerde de mevcuttur.

3. Uygulamayı çalıştırın

Uygulamanızı Performance Monitoring SDK ile başarılı bir şekilde entegre ettiyseniz, proje şimdi derlenmelidir. Android Studio'da, uygulamayı bağlı Android cihazınızda/emülatörünüzde oluşturmak ve çalıştırmak için Çalıştır > 'uygulamayı çalıştır' öğesine tıklayın.

Uygulamanın sizi aşağıdaki gibi ilgili bir Aktivite ve Parçaya götüren iki düğmesi vardır:

410d8686b4f45c33.png

Bu codelab'in aşağıdaki adımlarında, Aktivitenizin veya Fragmentinizin yükleme süresini ve ekran oluşturma performansını nasıl ölçeceğinizi öğreneceksiniz.

4. Bir Aktivite veya Fragmanın yüklenmesini anlama

Bu adımda, bir Activity veya Fragment'ın yüklenmesi sırasında sistemin ne yaptığını öğreneceğiz.

Bir Aktivitenin yüklenmesini anlama

Bir Aktivite için, yükleme süresi, Aktivite nesnesinin tamamen oluşturulduğu andan itibaren İlk Çerçeve tamamen ekranda çizilene kadar geçen süre olarak tanımlanır ( bu, kullanıcınızın Aktivite için tam UI'yi ilk kez göreceği zamandır). zaman ). Uygulamanızın tamamen çizilip çizilmediğini ölçmek için, uygulamanın başlatılması ile tüm kaynakların tam olarak görüntülenmesi ve hiyerarşilerin görüntülenmesi arasında geçen süreyi ölçmek için reportFullyDrawn() yöntemini kullanabilirsiniz.

Yüksek düzeyde, uygulamanız startActivity(Intent) çağırdığında, sistem aşağıdaki işlemleri otomatik olarak gerçekleştirir. Her işlemin tamamlanması zaman alır, bu da Aktivite oluşturma ile kullanıcının kendi ekranında Aktivite için UI'yi görmesi arasındaki süreye eklenir.

c20d14b151549937.png

Bir Parçanın yüklenmesini anlama

Aktiviteye benzer şekilde, bir Fragment için yükleme süresi, Fragment'in ana bilgisayar Aktivitesine eklenmesinden başlayarak, Fragment Görünümü için İlk Çerçevenin ekranda tamamen çizilmesine kadar geçen süre olarak tanımlanır.

5. Bir Aktivitenin yükleme süresini ölçün

İlk karedeki gecikmeler kötü bir kullanıcı deneyimine yol açabilir, bu nedenle kullanıcılarınızın ne kadar ilk yükleme gecikmesi yaşadığını anlamak önemlidir. Bu yükleme süresini ölçmek için özel bir kod izleme aracı kullanabilirsiniz:

  1. Activity nesnesi oluşturulur oluşturulmaz Activity sınıfında özel kod izlemeyi ( TestActivity-LoadTime adlı) başlatın.

TestActivity.java

public class TestActivity extends AppCompatActivity {   
    // TODO (1): Start trace recording as soon as the Activity object is created.
    private final Trace viewLoadTrace = FirebasePerformance.startTrace("TestActivity-LoadTime");

    // ...

}
  1. onCreate() geri çağrısını geçersiz kılın ve görünümün setContentView() yöntemiyle eklenmesini sağlayın.
@Override     
public void onCreate(Bundle savedInstanceState) {    
    super.onCreate(savedInstanceState);          

    // Current Activity's main View (as defined in the layout xml file) is inflated after this            
    setContentView(R.layout.activity_test);          

    // ...

    // TODO (2): Get the View added by Activity's setContentView() method.         
    View mainView = findViewById(android.R.id.content);     

    // ...
}
  1. İki geri çağrıya sahip olan bir FistDrawListener uygulamasını ekledik: onDrawingStart() ve onDrawingFinish() ( FirstDrawListener ve performansını nelerin etkileyebileceği hakkında daha fazla ayrıntı için aşağıdaki sonraki bölüme bakın ). FirstDrawListener Activity'nin onCreate() geri çağrısının sonunda kaydedin. onDrawingFinish() geri çağrısında viewLoadTrace durdurmalısınız.

TestActivity.java

    // TODO (3): Register the callback to listen for first frame rendering (see
    //  "OnFirstDrawCallback" in FirstDrawListener) and stop the trace when View drawing is
    //  finished.
    FirstDrawListener.registerFirstDrawListener(mainView, new FirstDrawListener.OnFirstDrawCallback() {              
        @Override             
        public void onDrawingStart() {       
          // In practice you can also record this event separately
        }

        @Override             
        public void onDrawingFinish() {
            // This is when the Activity UI is completely drawn on the screen
            viewLoadTrace.stop();             
        }         
    });
  1. Uygulamayı yeniden çalıştırın. Ardından, logcat'i " Logging trace metric " ile filtreleyin. LOAD ACTIVITY düğmesine dokunun ve aşağıdaki gibi günlükleri arayın:
I/FirebasePerformance: Logging trace metric: TestActivity-LoadTime (duration: XXXms)

🎉 Tebrikler! Bir Etkinliğin yükleme süresini başarıyla ölçtünüz ve bu verileri Firebase Performance Monitoring'e bildirdiniz. Bu kod laboratuvarında daha sonra Firebase konsolunda kaydedilen metriği görüntüleyeceğiz.

FirstDrawListener'ın Amacı

Hemen yukarıdaki bölümde bir FirstDrawListener kaydettik. FirstDrawListener amacı, ilk karenin ne zaman başladığını ve çizimi ne zaman bitirdiğini ölçmektir.

ViewTreeObserver.OnDrawListener uygular ve Görünüm ağacı çizilmek üzereyken çağrılan onDraw onDraw() geri çağrısını geçersiz kılar. Ardından, onDrawingStart() ve onDrawingFinish() yardımcı program geri çağrılarını sağlamak için sonucu sarar.

FirstDrawListener için tam kod, bu codelab'in kaynak kodunda bulunabilir.

6. Bir Parçanın yükleme süresini ölçün

Bir Parçanın yükleme süresini ölçmek, bir Aktivite için nasıl ölçtüğümüze benzer, ancak bazı küçük farklılıklar vardır. Yine, özel bir kod izlemesi uygulayacağız :

  1. onAttach() geri aramasını geçersiz kılın ve fragmentLoadTrace dosyanızı kaydetmeye başlayın. Bu izlemeyi Test-Fragment-LoadTime .

Daha önceki bir adımda açıklandığı gibi, Fragment nesnesi herhangi bir zamanda oluşturulabilir, ancak yalnızca ana bilgisayar Etkinliğine eklendiğinde etkin hale gelir.

TestFragment.java

public class TestFragment extends Fragment {

   // TODO (1): Declare the Trace variable.
   private Trace fragmentLoadTrace;

   @Override
   public void onAttach(@NonNull Context context) {
       super.onAttach(context);

       // TODO (2): Start trace recording as soon as the Fragment is attached to its host Activity.
       fragmentLoadTrace = FirebasePerformance.startTrace("TestFragment-LoadTime");
   }
  1. FirstDrawListener onViewCreated() geri çağrısına kaydedin. Ardından, Activity örneğine benzer şekilde, onDrawingFinish() içindeki izlemeyi durdurun.

TestFragment.java

@Override
public void onViewCreated(@NonNull View mainView, Bundle savedInstanceState) {
   super.onViewCreated(mainView, savedInstanceState);

   // ...

   // TODO (3): Register the callback to listen for first frame rendering (see
   //  "OnFirstDrawCallback" in FirstDrawListener) and stop the trace when view drawing is
   //  finished.
   FirstDrawListener.registerFirstDrawListener(mainView, new FirstDrawListener.OnFirstDrawCallback() {

       @Override
       public void onDrawingStart() {
           // In practice you can also record this event separately
       }

       @Override
       public void onDrawingFinish() {
           // This is when the Fragment UI is completely drawn on the screen
           fragmentLoadTrace.stop();
       }
   });
  1. Uygulamayı yeniden çalıştırın. Ardından, logcat'i " Logging trace metric " ile filtreleyin. LOAD FRAGMENT düğmesine dokunun ve aşağıdaki gibi günlükleri arayın:
I/FirebasePerformance: Logging trace metric: TestFragment-LoadTime (duration: XXXms)

🎉 Tebrikler! Bir Parçanın yükleme süresini başarıyla ölçtünüz ve bu verileri Firebase Performance Monitoring'e bildirdiniz. Bu kod laboratuvarında daha sonra Firebase konsolunda kaydedilen metriği görüntüleyeceğiz.

7. Ekran Oluşturmayı ve Yavaş/Donmuş karenin ne olduğunu anlama

UI Rendering, uygulamanızdan bir çerçeve oluşturma ve bunu ekranda görüntüleme eylemidir. Bir kullanıcının uygulamanızla etkileşiminin sorunsuz olmasını sağlamak için, uygulamanız saniyede 60 kare elde etmek için kareleri 16 ms'nin altında oluşturmalıdır ( neden 60 fps? ). Uygulamanızda yavaş UI oluşturma sorunu varsa, sistem kareleri atlamak zorunda kalır ve kullanıcı uygulamanızda kekemelik algılar. Biz buna jank diyoruz .

Benzer şekilde, donmuş çerçeveler , oluşturulması 700 ms'den uzun süren UI çerçeveleridir. Bu gecikme, uygulamanızın takıldığı ve çerçeve oluşturulurken neredeyse tam bir saniye boyunca kullanıcı girişine yanıt vermediği için bir sorundur.

8. Bir Fragmanın Yavaş/Donmuş karelerini ölçün

Firebase Performance Monitoring, bir Etkinlik için yavaş/donmuş kareleri otomatik olarak yakalar ( ancak yalnızca Donanım Hızlandırılmışsa ). Ancak, bu özellik şu anda Fragments için mevcut değildir. Bir Fragmentin yavaş/donmuş çerçeveleri, Fragment'in yaşam döngüsündeki onFragmentAttached() ve onFragmentDetached() geri çağrıları arasındaki tüm Activity için yavaş/donmuş çerçeveler olarak tanımlanır.

AppStateMonitor sınıfından ( Activity için ekran izlerini kaydetmekten sorumlu Performans İzleme SDK'sının bir parçası olan) motivasyon alarak AppStateMonitor sınıfını (bu ScreenTrace kaynak kodu deposunun bir parçasıdır ) uyguladık. Yavaş/donmuş kareleri yakalamak için ScreenTrace sınıfı, Activity'nin FragmentManager yaşam döngüsü geri çağrısına bağlanabilir. Bu sınıf iki genel API sağlar:

  • recordScreenTrace() : Bir ekran izi kaydetmeye başlar
  • sendScreenTrace() : Ekran izleme kaydını durdurur ve Toplam, Yavaş ve Dondurulmuş kare sayılarını günlüğe kaydetmek için özel ölçümler ekler

Bu özel metrikler eklendiğinde, Fragmentler için ekran izleri, bir Aktivite için ekran izleriyle aynı şekilde işlenebilir ve Firebase konsolunun Performans panosunda diğer ekran oluşturma izleriyle birlikte görüntülenebilir.

Parçanız için ekran izlerini nasıl kaydedeceğiniz aşağıda açıklanmıştır:

  1. Fragment'i barındıran Aktivitenizde ScreenTrace sınıfını başlatın.

MainActivity.java

// Declare the Fragment tag
private static final String FRAGMENT_TAG = TestFragment.class.getSimpleName();

// TODO (1): Declare the ScreenTrace variable.
private ScreenTrace screenTrace;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // TODO (2): Initialize the ScreenTrace variable.
    screenTrace = new ScreenTrace(this, FRAGMENT_TAG);

    // ...
}
  1. Fragmentinizi yüklediğinizde, FragmentLifecycleCallbacks kaydolun ve onFragmentAttached() ve onFragmentDetached() geri aramalarını geçersiz kılın. Bunu sizin için yaptık. onFragmentAttached() onFragmentDetached() kaydı durdurmanız gerekir.

MainActivity.java

private final FragmentManager.FragmentLifecycleCallbacks fragmentLifecycleCallbacks =
       new FragmentManager.FragmentLifecycleCallbacks() {

           @Override
           public void onFragmentAttached(@NonNull FragmentManager fm, @NonNull Fragment f, @NonNull Context context) {
               super.onFragmentAttached(fm, f, context);

               // TODO (3): Start recording the screen traces as soon as the Fragment is
               //  attached to its host Activity.
               if (FRAGMENT_TAG.equals(f.getTag()) && screenTrace.isScreenTraceSupported()) {
                   screenTrace.recordScreenTrace();
               }
           }

           @Override
           public void onFragmentDetached(@NonNull FragmentManager fm, @NonNull Fragment f) {
               super.onFragmentDetached(fm, f);

               // TODO (4): Stop recording the screen traces as soon as the Fragment is
               //  detached from its host Activity.
               if (FRAGMENT_TAG.equals(f.getTag()) && screenTrace.isScreenTraceSupported()) {
                   screenTrace.sendScreenTrace();
               }

               // Unregister Fragment lifecycle callbacks after the Fragment is detached
               fm.unregisterFragmentLifecycleCallbacks(fragmentLifecycleCallbacks);
           }
       };
  1. Uygulamayı yeniden çalıştırın. Ardından, LOAD FRAGMENT düğmesine dokunun. Birkaç saniye bekleyin, ardından alt gezinme çubuğundaki back button tıklayın.

Logcat'i " Logging trace metric " ile filtreleyin, ardından aşağıdaki gibi günlükleri arayın:

I/FirebasePerformance: Logging trace metric: _st_MainActivity-TestFragment (duration: XXXms)

Logcat'i " FireperfViews " ile filtreleyin, ardından aşağıdaki gibi günlükleri arayın:

D/FireperfViews: sendScreenTrace MainActivity-TestFragment, name: _st_MainActivity-TestFragment, total_frames: XX, slow_frames: XX, frozen_frames: XX

🎉 Tebrikler! Bir Fragment için Yavaş/Donmuş kareleri başarıyla ölçtünüz ve bu verileri Firebase Performance Monitoring'e bildirdiniz. Firebase konsolunda kaydedilen metrikleri bu kod laboratuvarında daha sonra görüntüleyeceğiz.

9. Firebase konsolunda metrikleri kontrol edin

  1. Logcat'te, bir iz için ayrıntılar sayfasını ziyaret etmek için Firebase konsol URL'sini tıklayın. ceb9d5ba51bb6e89.jpeg

Alternatif olarak, Firebase konsolunda uygulamanızın bulunduğu projeyi seçin. Sol panelde, Yayınla ve İzle bölümünü bulun ve ardından Performans öğesini tıklayın.

  • Ana Pano sekmesinde, izler tablosuna gidin ve ardından Özel izler sekmesine tıklayın. Bu tabloda, daha önce eklediğimiz özel kod izlerini ve _app_start izlemesi gibi bazı kullanıma hazır izleri göreceksiniz.
  • TestActivity-LoadTime ve TestFragment-LoadTime adlı iki özel kod izlemenizi bulun. Toplanan veriler hakkında daha fazla ayrıntı görüntülemek için her ikisinden biri için Süre'ye tıklayın.

a0d8455c5269a590.png

  1. Özel kod izinin ayrıntı sayfası, size izleme süresi (yani ölçülen yükleme süresi) hakkında bilgi verir.

5e92a307b7410d8b.png

  1. Özel ekran izlemeniz için performans verilerini de görüntüleyebilirsiniz.
  • Ana Gösterge Tablosu sekmesine geri dönün, izleme tablosuna gidin, ardından Ekran oluşturma sekmesine tıklayın. Bu tabloda, daha önce eklediğimiz özel ekran izlerini ve MainActivity izleme gibi kullanıma hazır ekran izlerini göreceksiniz.
  • Özel ekran izinizi bulun, MainActivity-TestFragment . Yavaş işleme ve donmuş karelerin toplu verilerini görüntülemek için izleme adına tıklayın.

ee7890c7e2c28740.png

10. Tebrikler

Tebrikler! Firebase Performance Monitoring'i kullanarak bir Aktivite ve Fragment'in yükleme süresini ve ekran oluşturma performansını başarıyla ölçtünüz!

ne başardın

  • Firebase Performance Monitoring'i örnek bir uygulamaya entegre ettiniz
  • Artık Görünüm yüklemesinin yaşam döngüsünü anlıyorsunuz
  • Özel kod izleri ekleyerek hem Etkinlik hem de Parçanın yükleme süresini ölçtünüz
  • Özel metriklerle özel ekran izleri ekleyerek yavaş/donmuş kareler kaydettiniz

Sıradaki ne

Firebase Performance, uygulamanızın özel izleme dışında daha fazla performans ölçümü yöntemi sağlar. Uygulama başlatma süresini, ön planda uygulama ve arka planda uygulama performans verilerini otomatik olarak ölçer. Firebase Konsolunda bu metrikleri kontrol etmenin zamanı geldi.

Ayrıca Firebase Performance, otomatik HTTP/S ağ isteği izleme sunar . Bununla, tek bir kod satırı yazmadan ağ isteklerini kolayca ölçebilirsiniz. Uygulamanızdan bazı ağ istekleri göndermeyi deneyebilir ve metrikleri Firebase konsolunda bulabilir misiniz?

Bonus

Artık özel kod izlerini kullanarak Aktivitenizin/Fragmentinizin yükleme süresini ve ekran oluşturma performansını nasıl ölçeceğinizi bildiğinize göre, herhangi bir Aktivite/Fragment için bu metrikleri kutunun dışında yakalayıp yakalayamayacağınızı görmek için açık kaynaklı kod tabanımızı keşfedebilir misiniz? Bu uygulamanın bir parçası mı? İsterseniz PR göndermekten çekinmeyin :-)

11. Bonus Öğrenme

Bir Aktivitenin yüklenmesi sırasında neler olduğunu anlamak, uygulamanızın performans özelliklerini daha iyi anlamanıza yardımcı olacaktır. Daha önceki bir adımda, bir Aktivitenin yüklenmesi sırasında neler olduğunu yüksek düzeyde tanımlamıştık, ancak aşağıdaki diyagram her bir aşamayı çok daha ayrıntılı olarak açıklamaktadır.

cd61c1495fad7961.png