优化Angular应用的性能

MVVM框架的性能，其实就取决于几个因素：

• 监控的个数
• 数据变更检测与绑定的方式
• 索引的性能
• 数据的大小
• 数据的结构

我们要优化Angular项目的性能，也需要从这几个方面入手。

1. 减少监控值的个数

监控值的个数怎么减少呢？

考虑极端情况，在不引入Angular的时候，监控的个数是为0的，每当我们有需要绑定的数据项，就产生了监控值。

我们注意到，Angular里面使用了一种HTML模板语法来做绑定，开发业务项目非常方便，但考虑一下，这种所谓的“模板”，其实与我们常见的那种模板是不同的。

传统的模板，是静态模板，将数据代入模板之后生成界面，之后数据再有变化，界面也不会变。但Angular的这种“模板”是动态的，当界面生成完毕，数据产生变更的时候，界面还是会更新。

这是Angular的优势，但我们有时候也会因为使用不当，反而增加困扰。因为Angular采用了变动检测的方式来跟踪数据的变化，这些事情都是有负担的，很多时候，有些数据在初始化之后就不再会变化，但因为我们没有把它们区分出来，Angular还是要生成一个监听器来跟踪这部分数据的变化，性能也就受到牵累。

在这种情况下，可以采用单次绑定，仅在初始化的时候把这些数据绑定，语法如下：

<div>{
  {::item}}</div>

<ul>  
  <li ng-repeat="item in ::items">{
  {item}}</li>
</ul>

这样的数据就不会被持续观测，也就有效减少了监控值的数目，提高了性能。

2. 降低数据比对的开销

这一个环节是从数据变更检测与绑定的方式入手。细节不说太多了，之前都说过。从数据到界面的更新，一般就两种方式：推、拉。

所谓推，就是在set的时候，主动把与之相关的数据更新，大部分框架是这种方式，低版本浏览器用defineSetter之类。

function Employee() {
    this._firstName = "";
    this._lastName = "";

    this.fullName = "";
}

Employee.prototype = {
    get firstName(){
        return this._firstName;
    },
    set firstName(val){
        this._firstName = val;
        this.fullName = val + " " + this.lastName;
    },
    get lastName(){
        return this._lastName;
    },
    set lastName(val){
        this._lastName = val;
        this.fullName = this.lastName + " " + val;
    }
};

所谓拉，就是set的时候只改变自己，关联数据等到用的时候自己去取。比如：

function Employee() {
    this.firstName = "";
    this.lastName = "";
}

Employee.prototype = {
    get fullName() {
        return this.firstName + " "