AngularJS uygulamamın özet Döngüsünün Performansını Nasıl Ölçebilirim?

Angularjs sindirim döngüsünün süresini ölçmenin basit bir yolu nedir? Sindirim döngüsünün performansını analiz etmek için çeşitli yöntemler vardır, ancak her biri kendi pitfalleriyle birlikte gelir:

• Chrome Profiler: Çok fazla ayrıntı, özet döngüsünü bulması kolay bir şekilde bozmaz
• Batarang (AngularJS tarayıcı eklentisi): Çok fazla ek yük, yavaş yenileme hızı, büyük uygulamalarla patlar.

... daha iyi bir yol olmalı?! 1?

İşte bir sır. Chrome geliştirici araçlarında, bir cpu profili çalıştırın. Yakalamayı durdurduktan sonra, ekranın altında "Ağır (Aşağıdan Yukarı)" seçeneğinin yanında aşağı bir üçgen vardır. Üçgeni tıklayın ve "Alev Grafiği" ni seçin. Alev Grafiği moduna girdikten sonra, özet döngülerini, ne kadar sürdüklerini ve tam olarak hangi işlevlerin çağrıldığını görmek için yakınlaştırabilir ve kaydırabilirsiniz. Alev Grafiği, sayfa yükleme sorunlarını, ng-tekrarlama performans sorunlarını, özet döngüsü sorunlarını izlemek için inanılmaz derecede kullanışlıdır! Flame Chart'tan önce nasıl hata ayıklayıp profil oluşturduğumu gerçekten bilmiyorum. İşte bir örnek:

Aşağıdaki cevap size $ Digest döngüsünün boşta kalma performansını, yani, saat ifadelerinizden hiçbiri değişmediğinde özetin performansını söyleyecektir . Görünüm değişmediğinde bile uygulamanız yavaş görünüyorsa bu yararlıdır. Daha karmaşık durumlar için aet'nin cevabına bakın.

Aşağıdakileri konsola yazın:

angular.element(document).injector().invoke(function($rootScope) { 
  var a = performance.now(); 
  $rootScope.$apply(); 
  console.log(performance.now()-a); 
})

Sonuç size milisaniye cinsinden sindirim döngüsünün süresini verecektir. Sayı ne kadar küçükse o kadar iyidir.

NOT:

Domi yorumlarda şunları kaydetti: Başlatma angular.element(document)için ng-appyönergeyi kullanırsanız fazla sonuç vermeyecektir . Bu durumda, ng-apponun yerine elementi alın . Örneğin yaparakangular.element('#ng-app')

Şunları da deneyebilirsiniz:

angular.element(document.querySelector('[ng-app]')).injector().invoke(function($rootScope) { 
  var a = performance.now(); 
  $rootScope.$apply(); 
  console.log(performance.now()-a); 
})

Özet profil oluşturmaya yardımcı olan bulduğum yeni bir araç: Özet-HUD

Açısal performans da kullanabilirsiniz.

Bu uzantı, izleyici sayısı, özet zamanlaması ve özet hızı için gerçek zamanlı izleme grafikleri sağlar. Ayrıca, daha özyinelemeli desenlerden olağanüstü uzun özet zamanlaması elde edebilmeniz için özet zamanlama dağılımını da elde edersiniz ve tüm gerçek zamanlı veriler, hangi eylemlerin uygulama performanslarını değiştirdiğini belirleyebilmeniz için olaylara bağlanır. Son olarak, uygulamanızın çalışma süresi üzerinde daha fazla etkiye sahip olanları belirlemek için hizmetler yöntemini zamanlayabilir ve yürütmelerini sayabilirsiniz.

Disclamer: Uzantının yazarıyım

Özet döngüsüne göz kulak olmak için kullanışlı bir araç , @kentcdodds tarafından mükemmel ng-istatistik aracı aracılığıyla bulunabilir . Bunun gibi küçük bir görsel öğe yaratır ve hatta yer imi aracılığıyla uygulanabilir. Hatta jsfiddle gibi iFrame'lerin içinde bile kullanılabilir.

Sayfanızın açısal özeti / saatleri hakkındaki istatistikleri göstermek için küçük bir yardımcı program. Bu kitaplık şu anda bir grafik oluşturmak için basit bir komut dosyasına sahiptir (aşağıya bakın). Ayrıca , belirlediğiniz sayfada belirli bir yere açısal istatistikler yerleştirmek için kullanılabilecek angularStatsadı verilen bir yönergeye sahip bir modül de oluşturur angular-stats.

En Bulunan https://github.com/kentcdodds/ng-stats

UX Profiler'ı kullanabilirsiniz

• Kullanıcı İşlemi görünümü, yani CLICK ve bunun neden olduğu tüm etkinlikler (diğer olaylar, XHR'ler, Zaman Aşımları) birlikte gruplandırılmıştır.
• Tüm Kullanıcı İşleminin ve / veya parçalarının zaman ölçümleri (Kullanıcının hissettiği şekliyle).
• Eşzamansız yığın izleme birleşik.
• Focused Profiler - yalnızca sorunlu olayın profilini çıkarın.
• Açısal 1.x entegrasyonu.

katı mod için, bir özet cucle çalıştırması için, kromda f12 konsolunda çalıştırın

angular.element(document).injector().invoke(['$rootScope',function($rootScope) { var a = performance.now(); $rootScope.$apply(); return performance.now()-a; }])

Yukarıda açıklanan araçlar, size özet döngüsünün performansını ölçme fikrini verdi. Özet döngüsünün performansını artırmak için en önemli noktalar şunlardır:

• Tüm görünmez öğeleri gizlemek ve
  izleyici sayısını büyük ölçüde azaltmak için olayları yakından izleyin .

• Diğer tüm olaylar için yönetilebilir $ özet döngülerine sahip olun.