AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题。
在项目中我们使用 ng-repeat 加载完一个列表后,如果再次请求数据,然后过滤列表,代码可能会这么写:
<html> <head> <title>AngularJs ng-repeat实例</title> </head> <body> <h1>AngularJs ng-repeat实例</h1> <div ng-controller="Test"> <button ng-click="request()">请求新数据</button> <div ng-repeat="user in users"> {{user.name}} </div> </div> <script src="jquery-1.8.3.js"></script> <script src="angular1.2.9.js"></script> <script src="app.js"></script> </body> </html>
Controller 的代码:
var app = angular.module('myModule', []); app.controller('Test', ['$scope', function($scope) { var users = []; for (var i = 0; i < 10; i++) { users[i] = { id: i, name: "User: " + i }; } $scope.users = users; $scope.request = function () { var newUsers = []; for (var i = 0; i < 10; i++) { newUsers[i] = { id: i, name: "NewUser: " + i }; } // 从服务器加载新数据 var result = newUsers; // 直接重新赋值给 users $scope.users = result; }; }]); angular.element(document).ready(function() { angular.bootstrap(document,['myModule']); });
查看 ng-repeat 的源码可以发现,当 ng-repeat 的数组被替换时, 它默认并不会重新利用已有的 Dom 元素,而是直接将其全部删除并重新生成新的数组 Dom 元素:
// 将上次生成的所有 dom 移除 for (key in lastBlockMap) { if (lastBlockMap.hasOwnProperty(key)) { block = lastBlockMap[key]; elementsToRemove = getBlockElements(block.clone); $animate.leave(elementsToRemove); forEach(elementsToRemove, function(element) { element[NG_REMOVED] = true; }); block.scope.$destroy(); } }
Dom 的频繁操作是非常不友好的,为什么 ng-repeat 不能利用已有的 dom 元素去更新数据呢?因为你没有把数组元素的标识属性告诉它,那么两次替换的时候它就没办法追踪了,稍微修改如上实例,我们Debug可以看到 ng-repeat 往数组里每个元素加了一个$$hashKey的属性:
var app = angular.module('myModule', []); app.controller('Test', ['$scope', function($scope) { var users = []; for (var i = 0; i < 10; i++) { users[i] = { id: i, name: "User: " + i }; } $scope.users = users; $scope.request = function () { var newUsers = []; for (var i = 0; i < 10; i++) { newUsers[i] = { id: i, name: "NewUser: " + i }; } // 从服务器加载新数据 var result = newUsers; $scope.oldJsonStr = JSON.stringify($scope.users); $scope.oldToJson = angular.toJson($scope.users); // 直接重新赋值给 users $scope.users = result; }; }]); angular.element(document).ready(function() { angular.bootstrap(document,['myModule']); });
Debug跟踪如下:
这个 key 是由 Angular 内部的 nextUid() 方法生成,类似数据库自增,但是是使用字符串。
现在我们明白了,因为每次替换数组都会导致 ng-repeat 为每个元素生成一个新 key, 所以根本没办法重用已有的 Dom 元素,那么我们可以使用下面track by语法来避免这个问题:
<html> <head> <title>AngularJs ng-repeat实例</title> </head> <body> <h1>AngularJs ng-repeat实例</h1> <div ng-controller="Test"> <button ng-click="request()">请求新数据</button> <div ng-repeat="user in users track by user.id"> {{user.name}} </div> <div> <div>JSON.stringify:{{oldJsonStr}}</div> <div>angular.toJson:{{oldToJson}}</div> </div> </div> <script src="jquery-1.8.3.js"></script> <script src="angular1.2.9.js"></script> <script src="app.js"></script> </body> </html>
这样 ng-repeat 就用将其缓存起来啦,当然可能你的数组元素没有一个标识属性,如果元素数量不多那么可以接受,不然还是建议你手动为其生成一个标识属性。
另外,通过如上在页面上输出JSON.stringify、angular.toJson进一步来看不使用track by和使用track by的效果:
a.不使用track by
b.使用track by
如上运行结果也说明:因为ng-repeat会在数组对象内部添加$$hashkey属性,使用JSON.stringify序列化不会过滤$$hashkey属性,angular.toJson则会过滤掉。
参考文章:http://www.cnblogs.com/MigCoder/p/3930264.html?utm_source=tuicool&utm_medium=referral
相关推荐
AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题。下面给大家分享在项目中使用ng-repeat指令实现下拉框。 1、问题背景 select下拉框里option组装成下拉框,这里利用ng-...
quick-ng-repeat, 一个更快速的替换AngularJS的重复指令 的AngularJS指令更快速地列出渲染特性浅表表( ngRepeat使用深表)动画支持特殊服务,使列表呈现在摘要循环之外在重compited列表中平滑滚动( 检查示例)大约 200...
前言 大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些。特别是数据大多都是静态的...所以当我们想要实现ng-repeat的功能又想兼备性能,那只能另找一
版本1.6.14 | 版本1.6.13 | 版本1.6.12 | ux-datagrid:一个Angular DataGrid AngularJS的高性能列表和数据网格,专为移动设备设计,使其在台式机上表现更好。 大多数列表都与回收的或及时创建的行一起工作,以成...
├最新AngularJS开发宝典—第018讲 ng-repeat实例详细讲解与后盾人网站进行分析.mp4 ├最新AngularJS开发宝典—第019讲 g-selected、ng-disabled、ng-readonly实例讲解.mp4 ├最新AngularJS开发宝典—第020讲 超简单...
角度架构AngularJS 架构模板/清单目的... 性能循环利用现有数据缓存数据ng-repeat 有限制4. 使用行之有效的方法使用引导程序和可靠的示例使用其他库以节省时间5. 测试端到端测试单元测试执照去做测试更多工厂和模块缓存
学习angularjs有一段时间了,但是一直都没有怎么考虑过性能方面的问题,上次在研究过滤器的时候涉及到了性能问题。所以自己也总结了下常用的性能优化。 优化$watch 1.及时移除不必要的watch var unWatch = $scope...
ng—repeat指令中对集合的监视314 瞬间绑定大量监视315 114小结315 第12章打包和部署AngularJSWeb应用317 121提升网络相关的性能318 压缩静态资源318 AngularJS如何判断依赖关系318 编写会被安全压缩的...
本文将介绍一些AngularJS比较常见的性能问题,以及优化的建议。 2. 性能测试工具 本文采用jsPerf http://jsperf.com/ 性能测试的基准。 3. 软件性能 评价软件性能有两个基本的因素: 首先是算法的时间复杂度。一个...
AnglarJS作为一款优秀的Web框架,...这是我们将核心管理页面迁移到AngularJS过程中遇到的问题。这些页面在显示500行数据时本应该工作顺畅,但首个方法的渲染时间竟花费了7秒,太可怕了。 后来,我们发现了在实现过程
自述文件概述This Weekend 是一个旧金山事件搜索应用程序,它使用来自 Eventbrite 的数据和一个 AngularJS 框架,专注于提供性能和准确性。 它的灵感来自 Eventbrite 的目标,即生产一种用户友好的家庭产品,用户...