angular的性能分析 -随记
$watch 的实现原理和性能分析
- 只有双向绑定的
scope
才会被加入$watch
队列,或者手动绑定$watch
的$scope
- 所有放在
$scope
中的变量或函数
都被加入到了$watch
队列当中,每次只要$scope
中的一个变量的值发生变化,Angular就会自动调用$apply
或者$digest
来把所有在$watch
队列中的变量或函数都执行一遍,然后把当前值和上一次的值就行比较,如果有变化,就会在执行一遍(一直循环,最多11次),知道没有变化就会停止 - 任何
事件
如果调用Angular的context
中的函数
之后,都会对$watch
队列进行对比执行,不管有没有对$scope
进行改变,
例如:
ng-click
执行了一个函数$scope.say = function(){ \nothing }
, 在这个函数里面没有任何操作,但还是会执行$watch
队列
ng-repeat 的原理和性能问题
- 在
ng-repeat
循环中的每一个item
都会建立一个单独的scope
并对每个scope
中的model
进行$watch
. - 这样的话如果有200条数据,每条数据中5个属性要被
$watch
, 那么就是200 * 5
次,又因为每次脏数据检测至少都需要执行两次来保证所有变化都被应用,那么就是200 * 5 * 2
, 在加上单独的ng-repeat
一个和其他的model
为n
个,就是200 * 5 * 2 + 1 + n
, 如果这个数据超过2500
的话页面就会变得很慢了 - 所以如果
ng-repeat
的数据只是用来展示不需要对其进行操作的话就可以取消$watch
绑定,可以使用一个Angular的第三方directive: Bindonce.