angular 的双向绑定

[oliver1204]

dirty-checking

angular的脏检查机制(dirty-checking)是指，ng在指定事件触发后，才进入$digest cycle：

• DOM事件，譬如用户输入文本，点击按钮等。(ng-click)
• XHR响应事件 ($http)
• 浏览器Location变更事件 ($location)
• Timer事件($timeout, $interval)
  才执行$digest()或$apply()。

$digest后批量更新UI

angular是进入$digest cycle，等待所有model都稳定后，才批量一次性更新UI。这种机制能减少浏览器repaint次数，从而提高性能。

提速 $digest cycle

关键点

• 尽少的触发$digest
• 尽快的执行$digest

优化$watch

$scope.$watch(watchExpression, modelChangeCallback), watchExpression可以是String或Function。

• 避免watchExpression中执行耗时操作，因为它在每次$digest都会执行1~2次。
• 避免watchExpression中操作dom，因为它很耗时。
• console.log也很耗时，记得发布时干掉它。（用grunt groundskeeper）
• ng-if vs ng-show， 前者会移除DOM和对应的watch
• 及时移除不必要的$watch。
• 避免深度watch， 即第三个参数为true
• 减少watch的变量长度

<p>plain text other {{variable}} plain text other</p>
//改为:
<p>plain text other <span ng-bind='variable'></span> plain text other</p>
//或
<p>plain text other <span>{{variable}}</span> plain text other</p>

$apply vs $digest

• $apply会使ng进入$digest cycle, 并从$rootScope开始遍历(深度优先)检查数据变更。
• $digest仅会检查该scope和它的子scope，当你确定当前操作仅影响它们时，用$digest可以稍微提升性能。

延迟执行

• 一些不必要的操作，放到$timeout里面延迟执行。
• 如果不涉及数据变更，$timeout可以加上第三个参数false，避免调用$apply。
• 对时间有要求的，第二个参数可以设置为0。

$http.get('http://path/to/url').success(function(data){
  $scope.name = data.name;
  $timeout(function(){
    //do sth later, such as log
  }, 0, false);
});

• $evalAsync vs $timeout
  • http://stackoverflow.com/questions/17301572/angularjs-evalasync-vs-timeout
  • directive中执行的$evalAsync， 会在angular操作DOM之后，浏览器渲染之前执行。
  • controller中执行的$evalAsync， 会在angular操作DOM之前执行，一般不这么用。
  • 而使用$timeout，会在浏览器渲染之后执行。

优化ng-repeat

限制列表个数

• 列表对象的数据转换，在放入scope之前处理。如$scope.dataList = convert(dataFromServer)
• 可以使用分页

使用 track by

• 刷新数据时，我们常这么做：$scope.tasks = data || [];，这会导致angular移除掉所有的DOM，重新创建和渲染。
• 若优化为ng-repeat="task in tasks track by task.id"后，angular就能复用task对应的原DOM进行更新，减少不必要渲染。
  参见：http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by

使用单次绑定

我们都知道angular建议一个页面最多2000个双向绑定，但在列表页面通常很容易超标。
譬如一个滑动到底部加载下页的表格，一行20+个绑定, 展示个100行就超标了。
如果指令需要展示的内容之变一次的话，我们可以使用自定义的指令来代替 bindonce

在scope绑定前尽量的将数据处理小一点。