我一直在尝试比较AngularJS 1.x和Angular 2的性能。这里有一个Plunkr,展示了Angular 1.x的一种“缺点”。如果作用域中存在太多元素,则在编辑输入字段时会注意到呈现速度变慢,因为框架将在检测到任何可能更改任何元素的事件时检查作用域中的所有元素。以下是第一个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优化的变更检测器而更快地执行脏检查?
第二个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");
}
}