how to measure loading time in Angular2?

Question

I am using Angular2. I would like to measure the loading time. It includes 3 child component inside. Two of them have enourmously heavy contents so I need to check performance. Toward it, I tried to use ngAfterViewChecked I found that ngAfterViewChecked called a lot times during loading. If somebody has experience performance test in Angular2, could you give some advice?

Answer 1

I'd recommend both using the "timeline" and "profiles" views in Dev Tools (chrome has very good timeline view), and "benchmark.js" for inline perf measures/testing. Those three things are very powerful indicators of what's what. The "timelines" view alone usually tells me what I need to know, but if you want to test individual functions granularly, wrapping in a simple timer may seem like a good idea but can be inaccurate for a number of reasons, something like benchmark.js can be very useful.

Updating with a simple example of using benchmark.js, this assumes you have installed benchmark and lodash via npm, I just created a new CLI project, installed lodash and benchmark, set up this little naive test, and ran it:

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

Output of onComplete, note "sample" contains the cycle data used to build the results:

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

The results can be interesting, you run on different machines (e.g. my old mac vs. my new one) and so forth and you see different results as you'd expect.

The info is actually all in the Benchmark.js site, you have to sort of work with it a little to start seeing how to use it.

MORE EDITS: Ok to REALLY beat this poor horse's corpse into a fine powder, here's a simple test that benchmarks creation of AppComponent in a test (note you have to adjust the jasmine timeout or the test will fail, alternatively you could make it not async but meh async is so fashionable..):

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/console output:

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)

Remember the test time (6.8) is because of all the cycles benchmark runs.