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.
- 1. Jak mogę zmierzyć czas reakcji i ładowania strony internetowej?
- 2. Jak zmierzyć całkowity czas spędzony w funkcji?
- 3. Jak mogę zmierzyć czas wątku w C#?
- 4. Zmierz czas ładowania strony ASP.NET
- 5. Jak zmierzyć czas wykonania kroku z ogórkiem
- 6. Jak zmierzyć czas renderowania DOM Angular 2 app?
- 7. jak zmierzyć czas wykonania funkcji (automatycznie) w Pythonie
- 8. Jak zmierzyć przetwarzanie CSS i czas renderowania w przeglądarce?
- 9. Jak mogę zmierzyć czas procesora dla określonego zestawu wątków?
- 10. Spring Boot Czas ładowania AOP
- 11. Nierozsądne WPF DataGrid Czas ładowania
- 12. Angular2 z maszynopisem - Błąd ładowania angular2/platforma/przeglądarka
- 13. czas ładowania witryny Windows Azure
- 14. Symfony2 czas ładowania i wydajność
- 15. Jak zmierzyć ciśnienie w sieci?
- 16. Jak poprawić czas ładowania w statycznej witrynie HTML?
- 17. Jak zmniejszyć czas pierwszego ładowania w ASP.net MVC 2?
- 18. Czy mogę zmierzyć czas wykonania poszczególnych operacji za pomocą TensorFlow?
- 19. Niespójny czas ładowania JS i PHP
- 20. Czas ładowania bibliotek współdzielonych a bibliotek statycznych
- 21. Powolny czas ładowania UIViewController (wolne ostrzeżenie ClientState)
- 22. Benchmarking czasu ładowania strony PHP
- 23. Zmniejsz czas ładowania od COLDSTART w Cordova jonowej
- 24. jak można zmierzyć czas spędzony w przełączniku kontekstowego pod platformie Java
- 25. Jak zmierzyć rozmiar stosu procesu?
- 26. jak zmierzyć szerokość tekstu w kineticjs?
- 27. C jak poprawnie mierzyć czas?
- 28. Czas ładowania strony w przeglądarce Google Chrome lub Mozilla Firefox
- 29. Czas ładowania Tweena w aplikacji Jersey over AppEngine
- 30. Jak napisać program w C, aby zmierzyć szybkość pamięci podręcznej?
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. –