Angular2'de yükleme süresini nasıl ölçebilirim?

Question

Angular2 kullanıyorum. Yükleme süresini ölçmek istiyorum. İçinde 3 çocuk bileşeni bulunur. İki tanesi çok ağır içeriğe sahip, bu yüzden performansı kontrol etmem gerekiyor. Doğru, ngAfterViewChecked kullanmaya çalıştım ngAfterViewChecked yükleme sırasında çok kez denilen bulundu. Eğer birisi Angular2’de performans testi yaptıysa, tavsiyede bulunabilir misiniz?

Answer 1

Hem Dev Tools'daki "zaman çizelgesi" ve "profiller" görünümlerini (kromun çok iyi bir zaman çizelgesi görünümüne sahip) hem de satır içi mükemmel ölçümler/testler için "benchmark.js" özelliklerini kullanmanızı öneririz. Bu üç şey neyin ne olduğu konusunda çok güçlü göstergeler. Tek başına "zaman çizelgeleri" görünümü genellikle neyi bilmem gerektiğini söyler, ancak tek tek işlevlerini ayrıntılı olarak test etmek isterseniz basit bir zamanlayıcıda kaydırma yapmak iyi bir fikir gibi görünebilir, ancak bir dizi nedenden ötürü yanlış olabilir. js çok yararlı olabilir.

benchmark.js'yi kullanmanın basit bir örneğiyle güncellenmesi, bu durumun npm aracılığıyla benchmark ve lodash yüklediğinizi varsayardım, yeni bir CLI projesi oluşturdum, lodash ve benchmark kurdum, bu küçük naif testi kurdum ve çalıştırdım: onComplete ait

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

Çıktı, "örnek" sonuçları oluşturmak için kullanılan çevrim verileri içerir not:

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

sonuç ilginç olabilir, sen mesela benim eski mac vs farklı makinelerde (çalıştırmak benim yeni birim) ve benzeri ve farklı sonuçlar görüyorsun beklediğiniz gibi.

Bu bilgi aslında Benchmark.js sitesindedir, bunun nasıl kullanıldığını görmeye başlamak için biraz çalışmanız gerekir.

DAHA DÜZENLENEN: GERÇEKTEN bu kötü atın cesedini ince bir pudrada yenmek için Tamam, bir testte AppComponent'in oluşturulmasını ölçen basit bir test (jasmine zaman aşımını ayarlamanız gerektiğine dikkat edin veya test başarısız olur, alternatif olarak değil zaman uyumsuz hale ama meh zaman uyumsuz öylesine moda ..):

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

    })); 
}); 

Terminali/konsol çıkışı:

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) 

Test süresi (6.8 hatırla) çünkü tüm döngüleri kriter çalışır taşımaktadır.