如何测量Angular2中的加载时间? [英] how to measure loading time in Angular2?

问题描述

我正在使用Angular2.我想衡量加载时间.它内部包含3个子组件.其中两个内容非常繁琐，因此我需要检查性能.为此，我尝试使用ngAfterViewChecked，我发现ngAfterViewChecked在加载期间调用了很多次.如果有人在Angular2中进行过性能测试，您能提供一些建议吗?

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?

推荐答案

我建议同时在Dev Tools中使用时间轴"和配置文件"视图(chrome具有很好的时间轴视图)和"benchmark.js"用于内联性能测试/测试.这三件事是什么是非常有力的指示.通常，时间轴"视图通常会告诉我我需要知道的内容，但是，如果您要细粒度地测试各个功能，则在简单的计时器中包装似乎是一个好主意，但由于多种原因(例如基准测试)可能不准确. js可能非常有用.

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.

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

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

onComplete的输出，请注意样本"包含用于构建结果的循环数据:

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
...

结果可能很有趣，您在不同的计算机上运行(例如，我的旧Mac与我的新Mac)，依此类推，您会看到与预期不同的结果.

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.

该信息实际上位于Benchmark.js站点中，您需要进行一些处理才能开始了解如何使用它.

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.

更多可以真正将这匹可怜的马的尸体打成粉末，这是一个简单的测试，它在测试中对AppComponent的创建进行基准测试(请注意，您必须调整茉莉花超时，否则测试将失败，或者可以它不是异步的，但异步是如此时尚..):

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

  }));
});

终端/控制台输出:

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

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

这篇关于如何测量Angular2中的加载时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！