Question

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

Answer 1

我建议使用＆＃34;时间线＆＃34;和＆＃34;个人资料＆＃34;开发工具中的视图（chrome具有非常好的时间轴视图）和＆＃34; benchmark.js＆＃34;用于内联性能测量/测试。这三件事是非常有力的指标。＆＃34;时间表＆＃34;单独查看通常会告诉我我需要知道什么，但是如果你想要精确地测试单个函数，包装在一个简单的计时器可能看起来是个好主意，但由于一些原因可能是不准确的，像benchmark.js这样的东西可能非常有用。

使用benchmark.js的简单示例进行更新，假设您已经通过npm安装了基准测试和lodash，我刚刚创建了一个新的CLI项目，安装了lodash和基准测试，设置了这个小小的天真测试，然后运行它：< / p>

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，注意＆＃34;样本＆＃34;包含用于构建结果的循环数据：

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

如何在Angular2中测量加载时间？

1 个答案: