私は AngularJS 1.x と Angular 2 をいじって、パフォーマンスを比較しようとしました。
これは、Angular 1.x の「マイナス面」を示すPlunkrです。スコープに存在する要素が多すぎると、入力フィールドを編集するときに入力フィールドのレンダリングに遅延が発生することに気付くでしょう。フレームワークは、変更された可能性のあるイベントを検出するたびに、スコープ上のすべての要素をチェックするからです。
最初の Plunkr (html) からの抜粋:
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input ng-model ="name"></input>
Hello, {{name}}!
<button ng-click="generateFields()">
Generate 5000 elements
</button>
{{list}}
</div>
最初の Plunkr (js) からの抜粋:
myApp.controller('myCtrl', function($scope) {
$scope.name = 'name';
$scope.list = [];
$scope.generateFields = function(){
for(i=0; i<5000;i++){
$scope.list.push(i);
}
}
});
このPlunkrでは、同様のサンプルを Angular 2 で書いています。ラグはまったくないようです。これはAngular 2でどのように解決されますか? フレームワークは、入力フィールドのみが変更されたことを何らかの方法で認識していますか?それとも、VM に最適化された変更検出機能により、ダーティ チェックの実行が高速になっているだけですか?
2 番目の Plunkr からの抜粋:
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<div>{{myProp}}</div>
<input [(ngModel)]="myProp" />
<button (click)="generateFields()">Generate</button>
<div>{{myList}}</div>
</div>
`,
directives: []
})
export class App {
constructor() {
}
myProp :string = "Change me!";
myList :any = [];
generateFields(){
for (var i = 1; i < 5000; i++)
{
this.myList.push(i);
}
console.log("fields generated");
}
}