2016-04-13 85 views
10

ionic kullanıyorum ve $ionicView.beforeEnter ve $ionicView.enter arasında 1 saniyeden fazla sürüyor.

Kodumun hangi bölümünün çok zaman aldığını nasıl bulabilirim? Batarang bana çok fazla yardım etmiyor ve bunu yapmanın kolay bir yolunu anlayamıyorum ...

+1

Kodunuzu paylaşabilir misiniz? Yani ben kontrol edecektim – Ygalbel

+0

Hayır yapamam. Oldukça büyük bir proje ... Ve diğer projeler için kullanabileceğimiz ve toplum için faydalı olabilecek genel bir çözüm arıyorum ... –

cevap

4

Muhtemelen pek yararlı değil ama benzer bir sorunla karşılaştığımda Chrome hata ayıklama uzmanını kullanarak suçluyu bulamadım ve denetleyiciye kodun bazı bölümlerini yorumlamak/hariç tutmak zorundaydım. Sorun, denetleyici başlangıç ​​aşamasında bazı üçüncü taraf takvimi bileşenlerinin yapılandırılmasının geçişi yavaşlatmasıydı (görüntü gösterimi). Bir kez yorumladı her şey iyi çalıştı. Bu benim kodum olmadığından ve bununla uğraşmak istemediğim için geçiş konusunda bir ilerleme spikeri eklemek zorunda kaldım.

+0

Bunu deneyeceğim. Ama eğer bazı direktifler ya da bunun gibi bir şey varsa, hata ayıklamak için gerçekten uzun olabilir ... –

3

Belki Timeline veya Profile gibi Chrome ile sağlanan hata ayıklama araçlarını kullanabilirsiniz: profil oluşturmaya veya zaman çizelgesi ve $ ionicView.beforeEnter ve $ ionicView.enter arasında ne olduğunu kontrol edin. Her iki özellik de bir arama modülüne sahiptir, böylece $ionicView.beforeEnter'u arayabilir ve $ionicView.enter'a kadar geçen süreyi görebilirsiniz. Muhtemelen en kolay yol değil ama umarım yardımcı olur.

+0

İlk sorumu belirtmeliydim, ama var Açısal/iyonik tarafından adlandırılan pek çok farklı fonksiyon, profiler oldukça işe yaramaz ... Ama ben arama modülü ile bakmaya çalışacağım. –

2

Bunu yapmanın kolay bir yolunu düşünemiyorum. Ancak, chrome javascript hata ayıklama aracını kullanarak, @ nico_ bahsini genişleterek, $ioniView.beforeEnter üzerinde bir kesme noktası ve $ionicView.enter'da bir kesme noktası ayarlayıp ardından kesme noktaları arasındaki koddan adım atmalısınız.

Chrome'un JavaScript hata ayıklama araçları hakkında daha fazla bilgi bulabilirsiniz ve nasıl burada kesme noktaları kurmak: https://developer.chrome.com/devtools/docs/javascript-debugging

+0

Kod "ara noktaları arasında" yoktur ... 2 olay arasında çağrılan çok fazla fonksiyon var ... –

+0

kesme noktaları arasında herhangi bir kod yazmıştır, ancak bu iki olay arasında çalışan çok sayıda iyonik kod vardır ve kodun içinden geçmeli veya hangi fonksiyonların çoğunu üstlendiğini görmek için iki kesme noktasındaki işlevleri izlemelisiniz. zaman... – mani

3

Konsolda Ağ sekmesinde trafiğini izleme denediniz mi? Ms cinsinden saat, xhr çağrılarının beklenenden daha uzun sürdüğü iyi bir göstergedir ... speed test çalıştırın.

Aksi takdirde, eğer krom kullanıyorsanız, bu Ionic görünümün durumu boyunca bazı debugger ifadelerini bırakabilirim. ... 2 olay arasında denilen çok fonksiyonları vardır "kesme noktaları arasındaki" hayır kod yoktur

2

...

- Tyrius

Sen işlevleri tanımlamak için çalışmalısınız Çalışmak için çok zaman alıyorlar.

Not: Uygulamanızın indirmelerle yavaşlamadığını varsayalım, indirme sürelerini Chrome Dev Tools'da kontrol edebilirsiniz (TTFB çok yüksekse, sunucu tarafında yavaşlık olabilir).

birkaç fonksiyonlar olup denilen çok kez orada
  • : çok

    function ExampleFunction() { 
        console.time("ExampleFunction"); 
        // ExampleFunction code 
        // ... 
        console.timeEnd("ExampleFunction"); 
        // output in console time between time() call and timeEnd() call 
    } 
    
  • varsa aradığınız hangi işlevleri biliyorsanız

    , iki ihtimal vardır Birçok kez çağrılan işlevler:

0 adlı küçük JS aracımı kullanmanızı öneririm

function ExampleFunction() { 
    let mId = Monitor.Start("ExampleFunction"); 
    // ExampleFunction code 
    // ... 
    Monitor.Stop(mId); 
} 

ve çok fazla zaman alıyor hangi işlevi ne görmek ne zaman, bu işlevi çağırır:Çalıştırmak için çok fazla zaman ayırdığınız kod blokları tespit aşamasında yardımcı olabilecek kez

function ShowMonitorRecords() { 
    // get all records sorted by total_time desc 
    let records = Monitor.GetAll().sort((a,b)=>{ return b.total_time - a.total_time; }); 
    // print every records 
    for (let record of records) { 
     let avg = record.total_time/record.call_count; 
     console.log(record.name + ": " + record.total_time.toFixed(2) 
      + "ms - called " + record.call_count 
      + " time(s) - average time : "+ avg.toFixed(2) +"ms"); 
    } 
} 

// will output something like : 
// Foo: 7234.33ms - called 2 time(s) - average time : 3617.16ms 
// Bar: 6104.25ms - called 3 time(s) - average time : 2034.75ms 

hangi işlevi çok fazla zaman alıyor, uygulamanızı ve refactor'ınızı yavaşlatan kodun tam bloğunu tanımlamak için Start/Stop'un kapsamını azaltabilirsiniz.

Bu yardımcı olur umarız!

İlgili konular