Jak zmierzyć czas ładowania w Angular2?

Question

Używam Angular2. Chciałbym zmierzyć czas ładowania. Zawiera 3 komponenty potomne w środku. Dwóch z nich ma ogromną zawartość, więc muszę sprawdzić wydajność. W kierunku tego, próbowałem użyć ngAfterViewChecked Stwierdziłem, że ngAfterViewChecked wywołał wiele razy podczas ładowania. Jeśli ktoś ma test wydajności w Angular2, czy mógłbyś doradzić?

Answer 1

Polecam oba przy użyciu widoków "oś czasu" i "profili" w Narzędziach programistycznych (chrome ma bardzo dobry widok osi czasu) oraz "benchmark.js" dla miar/testów inline. Te trzy rzeczy są bardzo silnymi wskaźnikami tego, co jest. Sam widok "linii czasu" zwykle mówi mi o tym, co muszę wiedzieć, ale jeśli chcesz przetestować poszczególne funkcje w sposób ziarnisty, zawijanie w prostym zegarze może wydawać się dobrym pomysłem, ale może być niedokładne z wielu powodów, na przykład testu porównawczego. js może być bardzo przydatne.

Aktualizacja za pomocą prostego przykładu użycia pliku benchmark.js, zakładając, że zainstalowałeś benchmark i lodash za pośrednictwem npm, właśnie utworzyłem nowy projekt CLI, zainstalowałem miejsce i test porównawczy, skonfigurowałem ten mały test naiwny i uruchomiłem go:

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 


export class AppComponent implements OnInit { 
    title = 'app works!'; 

    ngOnInit () { 

    let Benchmark = require ('benchmark'); 

    let suite = new Benchmark.Suite ('foo'); 

    suite.add ('bm_initTheApp', this.initTheApp, { 
     onStart : x => console.log ('Started, running cycles...'), 
     onCycle : y => { /* uncomment if you want to see all cycle events... console.log (y) */ }, 
     onComplete : z => { 
     console.log (z.target.stats); 
     } 
    }); 

    suite.run (); 

    // Commenting out so just the test results run 
    // this.initTheApp (); 
    } 

    initTheApp () { 
    let obj = {}; 
    // Increase/decrease top of range to see benchmark results change 
    for (let i = 0; i < 100000; i++) { 
     obj [ i ] = new Date ().getTime (); 
    } 
    } 
} 

Wyjście onComplete, uwaga „próbka” zawiera dane cyklu wykorzystane do budowy wyniki:

Object 
deviation: 0.002623874141915741 
mean: 0.024115942028985517 
moe: 0.0007582635069290856 
rme: 3.1442417054150775 
sample: Array[46] 
sem: 0.00038686913618830903 
variance: 0.000006884715512614065 
__proto__: Object 
... 

wyniki mogą być ciekawe, można uruchomić na różnych komputerach (np mój stary Mac vs. mój nowy) i tak dalej, a zobaczysz różne wyniki jak można się spodziewać.

Informacje są w rzeczywistości na stronie Benchmark.js, musisz trochę popracować, aby zacząć korzystać z tego.

WIĘCEJ EDYCJI: Ok, NAPRAWDĘ, pokonaj zwłoki tego biednego konia w drobny proszek, oto prosty test, który testuje tworzenie AppComponent w teście (zauważ, że musisz wyregulować limit czasu jaśminu lub test się nie powiedzie, alternatywnie możesz sprawiają, że nie asynchroniczny ale meh asynchroniczny jest tak modne ..):

import { TestBed, async } from '@angular/core/testing'; 
import { AppComponent } from './app.component'; 

describe('AppComponent',() => { 

    let originalTimeout = 0; 
    beforeEach(function() { 
    originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL; 
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000; 
    }); 

    afterEach(function() { 
    jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout; 
    }); 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     AppComponent 
     ], 
    }); 
    }); 

    it('testing creation time of AppComponent', async(() => { 

    let createComponent =() => { 
     let fixture = TestBed.createComponent(AppComponent); 
     let app = fixture.debugElement.componentInstance; 
     expect(app).toBeTruthy(); 
    }; 

    let Benchmark = require ('benchmark'); 
    let suite = new Benchmark.Suite ('foo'); 

    suite.add ('bm_createComponent', createComponent, { 
     onStart : x => console.log ('Started, running cycles...'), 
     onCycle : y => { /* uncomment if you want to see all cycle events... console.log (y) */ }, 
     onComplete : z => { 
     console.log (z.target.stats); 
     } 
    }); 

    suite.run (); 

    })); 
}); 

Terminal wyjściowy/console:

Chrome 55.0.2883 (Mac OS X 10.12.2): Executed 1 of 1 SUCCESS (5.991 secs/5.987 secs) 
27 01 2017 10:21:43.257:INFO [Chrome 55.0.2883 (Mac OS X 10.12.2)]: Connected on socket /#_i0lMi3253PdOXyEAAAC with id 16010891 
LOG: 'Started, running cycles...' 
LOG: Object{moe: 0.0005443808066806267, rme: 44.628742886059634, sem: 0.0002473333969471271, deviation: 0.0008567880198420503, mean: 0.0012197986577181209, variance: 7.340857109448616e-7, sample: [0.00023713646532438478, 0.00030425055928411636, 0.00042058165548098433, 0.0005615212527964206, 0.0006733780760626398, 0.0008859060402684564, 0.0011476510067114094, 0.001436241610738255, 0.0017472035794183446, 0.0020671140939597316, 0.0024205816554809844, 0.002736017897091723]} 
Chrome 55.0.2883 (Mac OS X 10.12.2): Executed 1 of 1 SUCCESS (6.869 secs/6.862 secs) 

Pamiętaj czas testu (6.8) z powodu wszystkich cykli Benchmark nakładów.