怎么提高AngularJS的性能

# 怎么提高AngularJS的性能

## 引言

AngularJS作為一款強大的前端框架，雖然已被Angular逐步取代，但在許多遺留系統中仍被廣泛使用。隨著應用規模擴大，性能問題逐漸顯現。本文將深入探討20+個提升AngularJS性能的實用技巧，涵蓋數據綁定優化、作用域管理、依賴注入等多個維度。

## 一、理解AngularJS性能瓶頸

### 1.1 臟檢查機制的原理
AngularJS通過`$digest`循環實現雙向數據綁定，當以下事件發生時觸發檢查：
- DOM事件（ng-click等）
- XHR響應（$http）
- 定時器（$timeout/$interval）
- 手動調用`$apply()`

```javascript
// 典型digest循環流程
scope.$watch('model', function(newVal, oldVal) {
  // 值變化時執行
});

1.2 常見性能痛點

• 過多的watcher（超過2000個時明顯卡頓）
• 頻繁的DOM操作（ng-repeat渲染大數據量）
• 不合理的過濾器（在數組過濾時重復計算）
• 作用域層級過深（嵌套scope影響遍歷效率）

二、核心優化策略

2.1 減少Watcher數量（關鍵優化）

2.1.1 使用單次綁定語法

<!-- 傳統雙向綁定 -->
<div>{{ user.name }}</div>

<!-- 單次綁定優化 -->
<div>{{ ::user.name }}</div>

2.1.2 手動注銷watch

var unregister = $scope.$watch('expensiveData', callback);
// 不再需要時注銷
unregister(); 

2.1.3 避免重復注冊

// 錯誤示范 - 每次調用都新建watcher
function update() {
  $scope.$watch('data', process);
}

// 正確做法 - 只注冊一次
$scope.$watch('data', process);

2.2 優化ng-repeat渲染

2.2.1 使用track by提升復用

<!-- 未優化 -->
<li ng-repeat="item in items">{{item.id}}</li>

<!-- 優化后 -->
<li ng-repeat="item in items track by item.id">{{item.id}}</li>

2.2.2 分頁/虛擬滾動方案

// 使用angular-ui-scroll
<tbody ui-scroll-viewport>
  <tr ui-scroll="item in datasource">{{item}}</tr>
</tbody>

2.2.3 限制顯示數量

<li ng-repeat="item in items | limitTo: 50"></li>

2.3 作用域優化技巧

2.3.1 避免深度watch

// 全對象對比（性能差）
$scope.$watch('obj', callback, true);

// 只監測特定屬性
$scope.$watch('obj.key', callback);

2.3.2 使用$watchCollection替代

// 僅檢測數組長度變化
$scope.$watchCollection('items', callback);

2.4 事件處理優化

2.4.1 防抖處理高頻事件

angular.module('app').directive('debounceClick', [
  '$timeout',
  function($timeout) {
    return {
      link: function(scope, element, attrs) {
        element.on('click', function() {
          $timeout.cancel(scope.timeout);
          scope.timeout = $timeout(function() {
            scope.$eval(attrs.debounceClick);
          }, 300);
        });
      }
    };
  }
]);

2.4.2 事件委托替代重復綁定

// 使用angular.element代理事件
angular.element(document).on('click', '.dynamic-item', handler);

三、高級優化手段

3.1 編譯階段優化

3.1.1 預編譯模板

// 使用$templateCache
$templateCache.put('template.html', '<div>預編譯內容</div>');

3.1.2 延遲非關鍵指令

.directive('lazyLoad', function($timeout) {
  return {
    link: function(scope, element) {
      $timeout(function() {
        // 延遲加載邏輯
      }, 1000);
    }
  };
});

3.2 依賴注入優化

3.2.1 生產模式啟用嚴格DI

angular.module('app', [], {
  strictDi: true
});

3.2.2 手動注入關鍵服務

// 傳統方式（性能較差）
app.controller('MyCtrl', function($http, $compile) {});

// 優化方式（壓縮安全）
MyCtrl.$inject = ['$http', '$compile'];

3.3 第三方庫整合

3.3.1 使用Web Workers處理計算

// 配置worker
var worker = new Worker('processor.js');
worker.onmessage = function(event) {
  $scope.$apply(function() {
    $scope.result = event.data;
  });
};

3.3.2 集成immutable.js

// 減少對象拷貝
$scope.list = Immutable.List(data);

四、工具鏈支持

4.1 性能分析工具

4.1.1 Batarang擴展

• Watcher數量統計
• 作用域樹可視化
• 性能時間線記錄

4.1.2 Chrome Timeline

• 記錄JS堆內存
• 分析CPU占用
• 檢測強制布局

4.2 構建優化

4.2.1 使用ng-annotate

npm install -g ng-annotate
ng-annotate -a src.js -o dist.js

4.2.2 代碼壓縮組合

// Grunt配置示例
grunt.initConfig({
  uglify: {
    options: {
      mangle: {
        except: ['angular']
      }
    }
  }
});

五、實戰案例

5.1 大型數據表格優化

原始方案： - 2000行數據直接渲染 - 每行10個watcher - 總watcher數：20,000

優化后： - 虛擬滾動只渲染可視區 - 單次綁定+track by - 總watcher數：<100

5.2 動態表單性能提升

問題場景： - 100個字段實時校驗 - 每個字段3個watcher（值、狀態、錯誤）

解決方案： 1. 改用$watchGroup批量監聽 2. 防抖處理輸入事件 3. 延遲非焦點字段校驗

六、未來遷移建議

雖然優化可以提升AngularJS應用性能，但建議： 1. 新項目直接采用Angular 2. 逐步重構核心模塊 3. 使用ngUpgrade混合模式

// Angular組件降級示例
@NgModule({
  declarations: [Ng2Component],
  entryComponents: [Ng2Component]
})
export class Ng2Module {
  constructor(private downgrade: downgradeInjectable) {
    downgrade.downgradeComponent('ng2Component');
  }
}

結語

通過本文的36個優化技巧，可使AngularJS應用獲得顯著性能提升。關鍵要訣： ? 控制watcher數量在2000以內
? 善用單次綁定和track by
? 合理使用工具分析瓶頸

“Premature optimization is the root of all evil.” - Donald Knuth
應在性能分析與業務需求間取得平衡

附錄：性能檢查清單 1. [ ] 啟用production模式（angular.reloadWithDebugInfo()禁用） 2. [ ] 使用$compileProvider.debugInfoEnabled(false) 3. [ ] 確認第三方插件無內存泄漏 4. [ ] 使用ng-strict-di檢測注入問題 “`