Angular性能优化

优化Angular应用的性能
MVVM框架的性能，其实就取决于几个因素：

1.监控的个数
2.数据变更检测与绑定的方式
3.索引的性能
4.数据的大小
5.数据的结构
我们要优化Angular项目的性能，也需要从这几个方面入手。

1. 减少监控值的个数
监控值的个数怎么减少呢？
考虑极端情况，在不引入Angular的时候，监控的个数是为0的，每当我们有需要绑定的数据项，就产生了监控值。
传统的模板，是静态模板，将数据代入模板之后生成界面，之后数据再有变化，界面也不会变。但Angular的这种“模板”是动态的，当界面生成完毕，数据产生变更的时候，界面还是会更新。
这是Angular的优势，但我们有时候也会因为使用不当，反而增加困扰。因为Angular采用了变动检测的方式来跟踪数据的变化，这些事情都是有负担的，很多时候，有些数据在初始化之后就不再会变化，但因为我们没有把它们区分出来，Angular还是要生成一个监听器来跟踪这部分数据的变化，性能也就受到牵累。
在这种情况下，可以采用单次绑定，仅在初始化的时候把这些数据绑定，语法如下（这个功能在1.3才加上，1.2之前都没有这个功能，而且1.3放弃了对IE8的支持，有点不完美）：

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

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

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

2. 降低数据比对的开销
这一个环节是从数据变更检测与绑定的方式入手，从数据到界面的更新，一般就两种方式：推、拉。推就是在set的时候，主动把与之相关的数据更新，大部分框架是这种方式。

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