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ć?Jak zmierzyć czas ładowania w Angular2?
Odpowiedz
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.
Dziękuję bardzo za użyteczne odpowiedzi. –
Czy jest kilka przykładów przy użyciu pliku benchmark.js? Spędziłem dużo czasu, szukając go, nie mogłem go znaleźć. Jeśli jest kilka przykładów, proszę podać trochę informacji. –
Należy pamiętać, że chociaż robię to bezpośrednio w aplikacji tutaj, z pewnością lepiej jest włączyć to do swoich testów karmy i czegokolwiek. Jeśli możesz przetestować go w teście karma/jaśmin, co z odcinkami i drwinkami i tym wszystkim, powinieneś być w stanie przetestować go za pomocą testu porównawczego. –