angular中关于ng-repeat的性能问题
首先,ng-repeat的渲染是改变则渲染的。而且是无法自动检测内容是否改变的。
$scope作为一个对象,对象的特性就是两个对象是不相同的,因为我们比较的是两个对象的地址,即便两个对象的内容甚至排版完全相同,也是false;
基于此,我们只能自己来限制它无意义的渲染。
我在做一个即时聊天板块,用到的angular,期间需要轮询,所以自己搞了一些办法来提高性能。
首先,我比较了$scope中子属性的内容——$scope.names。而names是一个Array类型的。也是没办法直接比较的。此处用到数组比较的另一个方法,转字符串。看代码:
.success(function (data){ if(lianxiren != data.toString()){ lianxiren = data.toString(); $scope.names = data; } })
OK,很简单。如果一样,啥也不干,如果不同,先存起来,然后赋给names。
这样就完了吗?并不。
既然是即时聊天,聊个几十上百句都是毛毛雨,嗨皮了聊上几百句也是正常的。
辣么,每次都重复渲染是不是很烦?而且如果记录多了,更是耗时间。
不怕,有办法。
ng-repeat="x in names track by $index"
track by。
我们只需要给已经渲染过的条目加上一个唯一标识符就可以让angular识别出来了。而标识符的内容,我选择了$index。
其实只要是唯一的就可以,自由发挥。
其实我想叫洛羽的,谁抢了我的昵称!!