Wie Debug Zeit zwischen $ ionicView.beforeEnter und $ ionicView.enter

Question

Ich verwende ionic, und es dauert mehr als 1s zwischen $ionicView.beforeEnter und $ionicView.enter.

Wie kann ich herausfinden, welcher Teil meines Codes so viel Zeit in Anspruch nimmt? Batarang hilft mir nicht sehr und ich kann mir keine einfache Lösung vorstellen ...

Answer 1

Wahrscheinlich nicht sehr hilfreich, aber als ich ein ähnliches Problem hatte, konnte ich nicht den Übeltäter mit Chrome debug Profiler finden und Teile des Codes in meinem Controller, den ich nacheinander übertrage, kommentieren. Das Problem war, dass einige Drittanbieter-Kalenderkomponenten, die in der Controller-Initialisierungsphase konfiguriert wurden, den Übergang verlangsamten (Ansichtsanzeige). Einmal auskommentiert hat alles gut geklappt. Da dies nicht mein Code war und ich mich nicht damit herumärgern wollte, musste ich beim Übergang einen Fortschrittsspinner hinzufügen.

Answer 2

Vielleicht können Sie die Debug-Tools verwenden, die mit Chrome zur Verfügung gestellt werden, wie Timeline oder Profile: Sie starten die Profilerstellung oder die Aufzeichnung der Zeitachse und überprüfen Sie, was zwischen $ ionicView.beforeEnter und $ ionicView.enter geschieht. Beide Funktionen haben ein Suchmodul, so dass Sie nach $ionicView.beforeEnter suchen können und sehen, was bis $ionicView.enter Zeit braucht. Es ist wahrscheinlich nicht der einfachste Weg, aber hoffe, es wird dir helfen.

Answer 3

Ich kann mir keine einfache Möglichkeit vorstellen, dies zu tun. Aber erweitern auf was @Nico_ erwähnt, mit dem Chrom Javascript Debug-Tool, sollten Sie einen Haltepunkt auf Ihrem $ioniView.beforeEnter und einen Haltepunkt auf $ionicView.enter dann Schritt durch den Code zwischen den Haltepunkten.

Sie können mehr über Chrome JavaScript Debug-Tools lesen und wie Stützpunkte hier einzurichten: https://developer.chrome.com/devtools/docs/javascript-debugging

Answer 4

Haben Sie versucht, den Verkehr in der Registerkarte Netzwerk in der Konsole überwachen? Die Zeit in ms ist ein guter Indikator dafür, welche xhr-Aufrufe länger als erwartet laufen ... Führen Sie eine speed test.

Andernfalls, wenn Sie Chrom verwenden, würde ich nur einige debugger Anweisungen im Fluss der ionischen Ansicht der Zustand fallen lassen.

Answer 5

Es gibt keinen Code "zwischen den einzelnen Stützpunkten" ... Es gibt so viele Funktionen zwischen den zwei Ereignissen genannt ...

- Tyrius

Sie sollten versuchen, Funktionen zu identifizieren Das dauert zu viel Zeit zu laufen.

Hinweis: Ich gehe davon aus, dass Ihre App nicht durch Downloads verlangsamt wird. Sie können Ihre Downloadzeit in Chrome Dev Tools überprüfen (Wenn TTFB zu hoch ist, kann es zu serverseitigen Verzögerungen kommen).

Wenn Sie wissen, welche Funktionen aufgerufen werden, haben Sie zwei Möglichkeiten:

• Wenn es ein paar Funktionen und nicht allzu genannt oft:

  function ExampleFunction() { 
      console.time("ExampleFunction"); 
      // ExampleFunction code 
      // ... 
      console.timeEnd("ExampleFunction"); 
      // output in console time between time() call and timeEnd() call 
  } 
  

• Wenn es viel von Funktionen, die oft genannt werden:

Ich empfehle Ihnen, mein kleines JS-Tool namens 0 zu verwendenhelfen Sie Codeblöcke, die zu viel Zeit identifizieren laufen:

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

und wenn Sie was zu sehen, welche Funktion zu viel Zeit nimmt, rufen Sie diese Funktion:

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 

Sobald Sie wissen, welche Funktion benötigt zu viel Zeit, Sie können den Umfang von Start/Stop reduzieren, um den genauen Code-Block zu identifizieren, der Ihre App verlangsamt und umgestaltet.

Hoffe, das hilft!