Как измерить время загрузки в Angular2?

Question

Я использую Angular2. Я хотел бы измерить время загрузки. Он включает в себя 3 дочерних компонента внутри. Два из них имеют чрезвычайно тяжелое содержание, поэтому мне нужно проверить производительность. Для этого я попытался использовать ngAfterViewChecked. Я обнаружил, что ngAfterViewChecked много раз вызывался во время загрузки. Если у кого-то есть опыт тестирования производительности в Angular2, не могли бы вы дать совет?

Answer 1

Я бы порекомендовал использовать представления "временная шкала" и "профили" в Dev Tools (chrome имеет очень хороший вид временной шкалы), а также "benchmark.js" для встроенных мер / тестирования производительности. Эти три вещи являются очень мощными показателями того, что к чему. Одно только представление "временных шкал" обычно говорит мне, что мне нужно знать, но если вы хотите детально протестировать отдельные функции, перенос в простой таймер может показаться хорошей идеей, но может быть неточным по ряду причин, что-то вроде эталонного теста. JS может быть очень полезным.

Обновляясь простым примером использования benchmark.js, это предполагает, что вы установили тесты и lodash через npm, я только что создал новый проект CLI, установил lodash и тесты, настроил этот маленький наивный тест и запустил его:

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 ( );
     }
  }
}

Вывод onComplete, примечание "sample" содержит данные цикла, использованные для построения результатов:

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

Результаты могут быть интересными, вы работаете на разных машинах (например, мой старый Mac против моего нового) и так далее, и вы видите разные результаты, как вы ожидаете.

На самом деле вся информация находится на сайте Benchmark.js, вам нужно немного поработать с ней, чтобы понять, как ее использовать.

БОЛЬШЕ РЕДАКТИРУЕТСЯ: Хорошо, чтобы ДЕЙСТВИТЕЛЬНО превратить труп этой бедной лошади в мелкий порошок, вот простой тест, который измеряет создание AppComponent в тесте (обратите внимание, что вы должны отрегулировать тайм-аут жасмина, иначе тест будет неудачным, или вы можете сделать его не асинхронным). но ме асинк так модно..)

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 ( );

  }));
});

Терминальный / консольный выход:

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)

Помните, что время теста (6.8) зависит от всех тестов циклов.