Firebase Performance Monitoring ile yükleme süresini ve ekran oluşturmayı ölçün

1. Giriş

Son Güncelleme: 2021-03-11

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

Görünümler, Android uygulamalarının kullanıcı deneyimini doğrudan etkileyen ö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 barındıran kullanıcı arayüzünü içerir. Kullanıcılar, ekrana tamamen çizilene kadar kullanıcı arayüzünün tüm içeriğini göremezler. Yavaş ve donmuş ekranlar, kullanıcının uygulamanızla etkileşimini doğrudan olumsuz etkileyecek ve kötü bir kullanıcı deneyimi yaratacaktır.

Firebase Performance Monitoring bu performans ölçümlerini kullanıma hazır sunmuyor mu?

Firebase Performance Monitoring, uygulamanızın başlangıç ​​zamanı (yani, yalnızca ilk Etkinliğinizin yükleme süresi) ve ekran oluşturma performansı (örneğin, Etkinlikler için yavaş ve donmuş kareler, ancak Etkinlikler için değil) gibi kullanıma hazır bazı performans verilerini otomatik olarak yakalar. Parça). Bununla birlikte, sektör uygulamalarında genellikle çok fazla Faaliyet yoktur, bunun yerine tek bir Faaliyet ve birden fazla Parça bulunur. Ayrıca çoğu uygulama, daha karmaşık kullanım durumları için genellikle kendi Özel Görünümlerini uygular. Bu nedenle, uygulamanızda özel kod izlerini kullanarak hem Etkinliklerin hem de Parçaların yükleme süresini ve ekran oluşturma performansını nasıl ölçeceğinizi anlamak genellikle yararlı olur. Özel Görünüm bileşenlerinin performansını ölçmek için bu codelab'i kolayca genişletebilirsiniz.

Ne öğreneceksin

  • Bir Android uygulamasına Firebase Performance Monitoring nasıl eklenir?
  • Bir Etkinliğin veya Parçanın yüklenmesini anlama
  • Bir Etkinliğin veya Parçanın yükleme süresini ölçmek için özel kod izlemeleri nasıl kullanılır?
  • Ekran Oluşturmayı ve Yavaş/Dondurulmuş çerçevenin ne olduğunu anlama
  • Yavaş/Donmuş ekranları kaydetmek için özel kod izlerini ölçümlerle ölçme
  • Toplanan metrikler Firebase konsolunda nasıl görüntülenir?

İhtiyacınız olan şey

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

2. Kurulum

Kodu al

Bu codelab'in örnek kodunu kopyalamak için aşağıdaki komutları çalıştırın. Bu, makinenizde 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ıyla ilgili bir uyarı göreceksiniz. Bu adımın bir sonraki bölümünde bunu düzelteceğiz.

Bu codelab'de, Android uygulamamızı bir Firebase projesine kaydetmek ve gerekli Firebase yapılandırma dosyalarını, eklentilerini ve bağımlılıklarını Android projemize eklemek için Firebase Assistant eklentisini kullanacağız - üstelik hepsi Android Studio'nun içinden !

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

  1. Android Studio 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'a tıklayın.
  2. Android projenizi Firebase'e bağlamak için Firebase'e Bağlan'ı 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 projesini ve yeni bir Firebase Uygulamasını oluşturmak için Devam'ı tıklayın ve şartları kabul edin.
  4. Daha sonra 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 İzlemeyi ekleyin

Android Studio'nun 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'e yönelik 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ğunu belirten 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 genel belgelerde de mevcuttur.

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

Uygulamanızı Performance Monitoring SDK ile başarılı bir şekilde entegre ettiyseniz projenin artık derlenmesi gerekir. Uygulamayı bağlı Android cihazınızda/emülatörünüzde oluşturmak ve çalıştırmak için Android Studio'da Çalıştır > 'Uygulamayı çalıştır'ı tıklayın.

Uygulamanın sizi ilgili Etkinliğe ve Parçaya yönlendiren iki düğmesi vardır:

410d8686b4f45c33.png

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

4. Bir Faaliyetin veya Parçanın Yüklenmesini Anlamak

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

Bir Etkinliğin yüklenmesini anlama

Bir Etkinlik için yükleme süresi, Etkinlik nesnesinin oluşturulduğu andan İlk Çerçevenin ekranda tamamen çizilmesine kadar geçen süre olarak tanımlanır ( bu, kullanıcınızın Etkinliğin tüm kullanıcı arayüzünü 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 ve görünüm hiyerarşilerinin tam olarak 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) öğesini çağırdığında sistem aşağıdaki işlemleri otomatik olarak gerçekleştirir. Her işlemin tamamlanması zaman alır, bu da Etkinlik oluşturma ile kullanıcının Etkinlik için kullanıcı arayüzünü ekranında görmesi arasındaki süreyi artırır.

c20d14b151549937.png

Bir Parçanın yüklenmesini anlama

Faaliyete benzer şekilde, bir Parçanın yükleme süresi, Parçanın ana bilgisayar Etkinliğine eklenmesinden Parça Görünümü için İlk Karenin ekranda tamamen çizilmesine kadar geçen süre olarak tanımlanır.

5. Bir Etkinliğin 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 başlangıçta ne kadar gecikme 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 izlemesini ( 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 setContentView() yöntemi tarafından eklenen Görünümü alı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 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 ). Activity'nin onCreate() geri çağrısının sonunda FirstDrawListener 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'ı " 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. Kaydedilen ölçümü Firebase konsolunda daha sonra bu codelab'de görüntüleyeceğiz.

FirstDrawListener'ın Amacı

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

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

FirstDrawListener tam kodunu bu codelab'in kaynak kodunda bulabilirsiniz.

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

Bir Parçanın yükleme süresini ölçmek, onu bir Etkinlik için ölçme yöntemimize benzer, ancak bazı küçük farklılıklar vardır. Yine özel bir kod izleme aracı kullanacağız:

  1. onAttach() geri çağrısını geçersiz kılın ve fragmentLoadTrace dosyanızı kaydetmeye başlayın. Bu izlemeyi Test-Fragment-LoadTime olarak adlandıracağız.

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'ı " 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. Kaydedilen ölçümü Firebase konsolunda daha sonra bu codelab'de görüntüleyeceğiz.

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

UI Rendering, uygulamanızdan bir çerçeve oluşturma ve onu ekranda görüntüleme eylemidir. Kullanıcının uygulamanızla etkileşiminin sorunsuz olmasını sağlamak için, uygulamanızın saniyede 60 kare ( neden 60 fps? ) elde etmek amacıyla kareleri 16 ms'nin altında oluşturması gerekir. Uygulamanızda yavaş kullanıcı arayüzü oluşturma sorunu yaşanıyorsa sistem kareleri atlamak zorunda kalır ve kullanıcı uygulamanızda takılma algılar. Biz buna jank diyoruz.

Benzer şekilde donmuş kareler, oluşturulması 700 ms'den uzun süren kullanıcı arayüzü kareleridir. Bu gecikme bir sorundur çünkü uygulamanız takılı kalmış gibi görünür ve çerçeve oluşturulurken neredeyse bir saniye boyunca kullanıcı girişine yanıt vermez.

8. Bir Parçanı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ırmalı olması durumunda ). Ancak bu özellik şu anda Fragmanlar için mevcut değildir. Bir Fragmentin yavaş/dondurulmuş kareleri, Fragmentin yaşam döngüsündeki onFragmentAttached() ve onFragmentDetached() geri çağrıları arasındaki tüm Faaliyet için yavaş/dondurulmuş kareler olarak tanımlanır.

AppStateMonitor sınıfından ( Activity için ekran izlerini kaydetmekten sorumlu Performance Monitoring SDK'nın bir parçası olan ) motivasyon alarak ScreenTrace sınıfını ( bu codelab kaynak kodu deposunun bir parçası olan ) uyguladık. ScreenTrace sınıfı, yavaş/donmuş kareleri yakalamak için 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 izini kaydetmeye başlar
  • sendScreenTrace() : Bir ekran izlemesinin kaydını durdurur ve Toplam, Yavaş ve Dondurulmuş kare sayımlarını günlüğe kaydetmek için özel ölçümler ekler

Bu özel metriklerin eklenmesiyle Parçalar için ekran izleri, bir Aktivite için ekran izleriyle aynı şekilde işlenebilir ve Firebase konsolunun Performans kontrol panelinde diğer ekran oluşturma izleriyle birlikte görüntülenebilir.

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

  1. Fragmenti barındıran Activity'nizde 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 çağrılarını geçersiz kılın. Bunu sizin için yaptık. onFragmentAttached() geri çağrısında ekran izlerini kaydetmeye başlamanız ve onFragmentDetached() geri çağrısında 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. Daha sonra LOAD FRAGMENT butonuna dokunun. Birkaç saniye bekleyin ve ardından alt gezinme çubuğundaki back button tıklayın.

Logcat'i " Günlük izleme ölçümü " 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 Parçanın Yavaş/Donmuş karelerini başarıyla ölçtünüz ve bu verileri Firebase Performance Monitoring'e bildirdiniz. Firebase konsolunda kaydedilen metrikleri daha sonra bu codelab'de görüntüleyeceğiz.

9. Firebase konsolundaki metrikleri kontrol edin

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

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

  • Ana Kontrol Paneli sekmesinde, izlemeler tablosuna doğru aşağı kaydırın ve ardından Özel izlemeler sekmesine tıklayın. Bu tabloda, daha önce eklediğimiz özel kod izlerinin yanı sıra _app_start trace gibi kullanıma hazır bazı izleri göreceksiniz.
  • İki özel kod izlemenizi bulun: TestActivity-LoadTime ve TestFragment-LoadTime . Toplanan verilerle ilgili daha fazla ayrıntı görüntülemek için her ikisinden birinin Süresine tıklayın.

a0d8455c5269a590.png

  1. Özel kod takibinin ayrıntı sayfası size takibin süresi (yani ölçülen yükleme süresi) hakkındaki bilgileri gösterir.

5e92a307b7410d8b.png

  1. Özel ekran izlemenizin performans verilerini de görüntüleyebilirsiniz.
  • Ana Kontrol Paneli sekmesine geri dönün, izlemeler tablosuna doğru aşağı kaydırın ve ardından Ekran oluşturma sekmesine tıklayın. Bu tabloda, daha önce eklediğimiz özel ekran izlerini ve ayrıca MainActivity izi gibi kullanıma hazır ekran izlerini göreceksiniz.
  • Özel ekran izlemenizi bulun MainActivity-TestFragment . Yavaş işleme ve dondurulmuş karelerin toplu verilerini görüntülemek için izleme adını tıklayın.

ee7890c7e2c28740.png

10. Tebrikler

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

Neyi başardın

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

Sıradaki ne

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

Firebase Performance ayrıca otomatik HTTP/S ağ isteği izleme özelliği sunar. Bununla tek satır kod yazmanıza gerek kalmadan ağ isteklerini kolayca yönetebilirsiniz. Uygulamanızdan bazı ağ istekleri göndermeyi deneyebilir ve metrikleri Firebase konsolunda bulabilir misiniz?

Bonus

Artık Özel kod izlerini kullanarak Etkinliğinizin/Parçanızın yükleme süresini ve ekran oluşturma performansını nasıl ölçeceğinizi bildiğinize göre, herhangi bir Etkinlik/Parça için bu ölçümleri kutudan çıktığı gibi yakalayıp yakalayamayacağınızı görmek için açık kaynaklı kod tabanımızı inceleyebilir misiniz? bu uygulamanın bir parçası mı? İsterseniz PR göndermekten çekinmeyin :-)

11. Bonus Öğrenme

Bir Etkinliğin 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 Etkinliğin yüklenmesi sırasında neler olduğunu yüksek düzeyde açıklamıştık, ancak aşağıdaki şemada her aşama çok daha ayrıntılı olarak açıklanmaktadır.

cd61c1495fad7961.png