Wie test der render-Geschwindigkeit in Eckige

Wir bauen ein Angular-app, und wir versuchen herauszufinden, wie man einige benchmarks auf, wie lange es dauert zum Rendern von verschiedenen Seiten. Ich habe gelesen, über performance.timing hier, aber das ist wohl nur sinnvoll, mit nicht-single-page-Applikationen, wie wenn ich navigieren, um neue Ansichten in unserer app, die timing-zahlen nicht ändern.

Im Idealfall wären wir in der Lage, fügen Sie einige code, der bekommt render-Zeit für verschiedene Ansichten und Beiträge es in unserer Big Query service.

Irgendwelche Ideen auf, wie man einige timing-Informationen für Ansichten in einer Angular-app?

EDIT:

Genauer gesagt, Sie gehen, um eine route, die lädt eine große ng-repeat-Liste (die ist nicht optimal für Leistung), und das Fenster hat eine lange Verzögerung, bevor es tatsächlich macht der Elemente in der Liste. Wir würden gerne sehen, wie lange es dauert, um von der großen leere Ansicht für das rendering der Elemente in der Liste.

  • Was genau möchtest du Messen? Es gibt einige built-in Veranstaltungen draußen wie $routeChangeStart und $routeChangeSuccess. Vielleicht könnten Sie, abonnieren Sie Sie, und verwenden Sie die User-Timing-API, um die Aufzeichnung des Timings.
  • Ich werde sehen, was genau diese Ereignisse erfassen. Ich fügte hinzu, ein edit oben mit mehr Einzelheiten.
  • vielleicht ähneln - stackoverflow.com/a/1975103/104380
  • Durch Ihre Referenz, die ich gefunden $viewContentLoaded was könnte das sein, was ich Suche!
  • Immer noch ungelöst. $viewContentLoaded feuert sofort, wenn wir gehen, um eine route statt, wenn der Inhalt tatsächlich gerendert wird.
InformationsquelleAutor EmptyArsenal | 2014-08-14
  1. 8

    Nach etwas Experimentieren, fand ich einen Weg, um eine Annäherung, wie lange eine view gerendert.

    Szenario:

    1. Route zu einer Seite in einem Winkel-app
    2. Stellen Sie AJAX-Aufruf erhalten Sie eine lange Liste von Elementen
    3. Liste der Elemente, pass in eine ng-repeat ul
    4. View der Liste

    In einer Angular-app ng-repeat ist ein notorischer performance-killer, aber es ist extrem bequem. Hier ist eine Diskussion über die Leistung und hier.

    Sagen wir, wir möchten Holen Sie sich ein Näherungswert für die Zeit, die es dauert, um von #3 bis #4, Test der AJAX-call performance ist ziemlich einfach.

    Hier ist etwas Kontext:

    <ul>
  <li ng-repeat="item in items">
    {{item.name}}
    <!-- More content here -->
  </li>
</ul>

    Und innerhalb der Eckigen controller:

    //Get items to populate ng-repeater
MyApiService.getItems(query)
  .then( function (data) {
    $scope.items = data;
    //When callback finishes, Angular will process items
    //and prepare to load into DOM
  }, function (reason) {
    console.log(reason);
  });

    Genannten Ereignisse durch @runTarm, $routeChangeStart, $routeChangeSuccess, und $viewContentLoaded ausgelöst werden, sobald die route geladen ist, aber bevor der DOM macht der Elemente, so lösen Sie nicht das Problem. Aber durch Experimentieren fand ich, dass, sobald die AJAX-callback beendet und setzt $scope.items -, Winkel beginnt eine blockierende operation der Verarbeitung items und Vorbereitung der ng-repeat ul eingefügt werden, in der DOM. Also, wenn du die Zeit nach deinem AJAX-Aufruf beendet, und die Zeit, wieder in ein setTimeout angegeben in der callback, der setTimeout Rückruf in der Warteschlange zu warten, bis Winkel erfolgt mit dem repeater und Sie bekommen die Zeit, die ein Bruchteil einer Sekunde, bevor der DOM macht, so dass Sie die nächste Näherung für die rendering-Zeit. Es werden nicht die tatsächlichen render-Zeit, aber der langsame Teil für uns ist nicht die DOM tun, es ist Arbeit, aber Eckig, was ist das, was wir suchen, um zu Messen.

    Hier ist die überarbeitete Beispiel:

    //Get items to populate ng-repeater
MyApiService.getItems(query)
  .then( function (data) {
    var start = new Date();
    $scope.items = data;
    //When callback finishes, Angular will process items
    //and prepare to load into DOM
    setTimeout( function () {
      //Logs when Angular is done processing repeater
      console.log('Process time: ' + (new Date() - start));
    }); //Leave timeout empty to fire on next tick
  }, function (reason) {
    console.log(reason);
  });
    InformationsquelleAutor EmptyArsenal
  2. 3

    Typoskript /Winkel (2+) Antwort:

    Benchmark für die Zeit, in Winkel-die rendering-Komponente Baum, Messen Sie vor und nach dem change detection). Dies wird die Zeit, wie lange es dauert, Winkel erstellen, alle untergeordneten Komponenten und bewerten ngIfs /ngFors usw.

    Manchmal, wenn change-detection läuft, wird sich nichts geändert haben und die festgelegten Intervall wird kleiner. Schau einfach nach dem längsten Zeitintervall und das ist wahrscheinlich, wo die ganze Arbeit passiert. Auch, am besten zu verwenden OnPush-change-detection-Strategie. Sehen http://blog.angular-university.io/onpush-change-detection-how-it-works/

    Erklären, dass diese Timer-Dienstprogramm über Ihre @Component({...}) class :

    class Timer {
  readonly start = performance.now();

  constructor(private readonly name: string) {}

  stop() {
    const time = performance.now() - this.start;
    console.log('Timer:', this.name, 'finished in', Math.round(time), 'ms');
  }
}

    Fügen Sie diese innen Ihrer Komponentenklasse:

    private t: Timer;

//When change detection begins
ngDoCheck() {
  this.t = new Timer('component 1 render');
}

//When change detection has finished:
//child components created, all *ngIfs evaluated
ngAfterViewChecked() {
  this.t.stop();  //Prints the time elapsed to the JS console.
}

    Beachten Sie, dass Winkel-rendering ist getrennt von der browser rendering (Malerei) auf dem Bildschirm. Das braucht Zeit, auch. Wenn Sie sehen, javascript (gelb) mit einer Menge von "checkAndUpdateView" und "callViewAction" Anrufe in der Chrome-Timeline-Tool (javascript-developer-Konsole -> Leistung -> record), Eckig Rendern passiert. Wenn Sie sehen, lila in der Chrome-Timeline-Tool, gekennzeichnet mit "rendering", dass die tatsächliche browserdarstellung.

    InformationsquelleAutor Alexander Taylor
  3. 0

    Versuchen, mit dem open-source-Chrome-plugin Winkel-performance monitor können Sie die digest-Zeit in Eckige Anwendungen: https://github.com/Linkurious/angular-performance

    InformationsquelleAutor Seb
Schreibe einen Kommentar