performance - 如何测量 Angular2 中的加载时间？

Question

我正在使用 Angular2。我想测量加载时间。它内部包含 3 个子组件。其中两个内容非常繁重，因此我需要检查性能。为此，我尝试使用 ngAfterViewChecked 我发现 ngAfterViewChecked 在加载过程中调用了很多次。如果有人有 Angular2 的性能测试经验，你能给点建议吗？

Answer 1

我建议同时使用开发工具中的“时间线”和“配置文件” View (chrome 具有非常好的时间线 View )，以及用于内联性能测量/测试的“benchmark.js”。这三件事是什么是什么的非常有力的指标。单独的“时间线” View 通常会告诉我我需要知道的内容，但如果您想精细地测试各个功能，包装在一个简单的计时器中似乎是个好主意，但由于多种原因可能不准确，例如基准测试。 js 可能非常有用。

更新了一个使用 benchmark.js 的简单示例，这假设你已经通过 npm 安装了 benchmark 和 lodash，我刚刚创建了一个新的 CLI 项目，安装了 lodash 和 benchmark，设置了这个简单的小测试，然后运行它:

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 的输出，注意“样本”包含用于构建结果的循环数据:

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 的创建进行基准测试(请注意，您必须调整 jasmine 超时，否则测试将失败，或者您可以它不是异步的，但是异步是如此时尚..):

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) 是因为基准测试运行的所有周期。