1.当 ng-repeat 的数组被替换时, 它默认并不会重新利用已有的 Dom 元素,而是直接将其全部删除并重新生成新的数组 Dom 元素:

2.Dom 的频繁操作是非常不友好的, ng-repeat为什么不能利用已有的 dom 元素去更新数据呢?因为你没有把数组元素的标识属性告诉它,那么两次替换的时候它就没办法追踪了;

3.ng-repeat会为每一个元素加上一个hashkey $$hashKey来识别每一个元素,当我们从后端重新获取数据时,即使数据完全一样,但是由于hashKey不一样,

angular会删除之前的所有dom,重新生成新的dom,这样效率就会大大降低。可以理解为ng-repeat默认是 track by $$hashKey的。

所以,我们应该使用一些不会变的东西来作为标识,比如后端数据的id.

4.列如:

<li class="gwclist" ng-repeat = "gwc in data | orderBy:'-sqtime' track by gwc.ID" ng-click = "gwcdetail(gwc)">
<h5>申请人:{{gwc.sqname}}<span class="pull-right color-dimgray">{{gwc.sqtime}}</span></h5>
<span>用餐时间:{{gwc.mettime}}</span>
<p ng-class="{0:'color-lightyellow',1:'color-red',2:'color-blue',3:'color-dimgray'}[{{gwc.processState | showstyle}}]">流程状态:{{gwc.processState}}</p>
<div class="button-bar" ng-if = "gwc.processState == '未提交'">
<a class="button button-small button-positive" ng-click="submit(gwc.ID)">提交</a>
<a class="button button-small button-stable" ng-click="delete(gwc.ID)">删除</a>
</div>
</li>
优点:这样当重新获取数据时,由于ID没有变,angular就不会去删除原来的dom,只会更新其中的内容,不同的ID再添加新的dom。效率就能提升了;

5.注意:

track by要放在orderBy之后,否则会影响orderBy的效果;

当单一数组有重复元素时,需要使用track by $index来保证两个元素都会渲染,否则只会渲染一个;

angular1中ng-repeat效率优化方法:的更多相关文章

  1. Kettle中ETL的效率优化

    ETL效率优化 开启数据库日志记录及性能监控 如果我们想要优化一个ETL(KTR或者KJB)的性能,我们首先需要知道的就是它的瓶颈在哪里.而这些信息一般只能在ETL运行的步骤度量中看到,并且是不会持久 ...

  2. ASP.NET中26种性能优化方法

    系统类  Type类,Object类,String类, Arrary类,Console类, Exception类,GC类, MarshalByRefObject类, Math类. DateTime结构 ...

  3. 项目中常用的MySQL优化方法--壹拾玖条

    1.EXPLAIN 做MySQL优化,我们要善用EXPLAIN查看SQL执行计划. 下面来个简单的示例,标注(1.2.3.4.5)我们要重点关注的数据: type列,连接类型.一个好的SQL语句至少要 ...

  4. 事件委托,js中的一种优化方法

    在前端编程中,我们常会遇到一种叫做事件委托的方法. 那么, 什么是事件委托呢? 简单来说,事件就是指onclick,onmouseover,onmouseout等大部分事件,为什么说是大部分后面会提到 ...

  5. 项目中常用的MySQL 优化

    本文我们来谈谈项目中常用的MySQL优化方法,共19条,具体如下: 一.EXPLAIN 做MySQL优化,我们要善用EXPLAIN查看SQL执行计划. 下面来个简单的示例,标注(1.2.3.4.5)我 ...

  6. 19条常用的MySQL优化方法(转)

    本文我们来谈谈项目中常用的MySQL优化方法,共19条,具体如下:1.EXPLAIN命令做MySQL优化,我们要善用EXPLAIN查看SQL执行计划.下面来个简单的示例,标注(1.2.3.4.5)我们 ...

  7. iOS-提高iOS开发效率的方法和工具

    提高iOS开发效率的方法和工具 介绍 这篇文章主要是介绍一下我在iOS开发中使用到的一些可以提升开发效率的方法和工具. IDE 首先要说的肯定是IDE了,说到IDE,Xcode不能跑,当然你也可能同时 ...

  8. <转>提高iOS开发效率的方法和工具

    介绍 这篇文章主要是介绍一下我在iOS开发中使用到的一些可以提升开发效率的方法和工具. IDE 首先要说的肯定是IDE了,说到IDE,Xcode不能跑,当然你也可能同时在使用AppCode等其他的ID ...

  9. 提高iOS开发效率的方法和工具

    http://www.cocoachina.com/ios/20150717/12626.html 介绍 这篇文章主要是介绍一下我在iOS开发中使用到的一些可以提升开发效率的方法和工具. IDE 首先 ...

随机推荐

  1. BatchPreparedStatementSetter,用法

    spring批量更新数据 ---- BatchPreparedStatementSetter (2007-04-15 15:41:29) 转载▼ 标签: spring batchpreparedsta ...

  2. centos下使用yum 安装pip

    本文为转载:原文出处:https://www.cnblogs.com/saolv/p/6963314.html centos下安装pip时失败: [root@wfm ~]# yum -y instal ...

  3. 结对作业_core组

    github地址:https://github.com/ljw-wakeup/expression_project2 对于这种结对的工作,由于有过电子设计实践的基础,大概知道建一个工程需要做的事,有点 ...

  4. SQL server 一些小结

    数据库表常用术语 关系 关系即二维表,每一个关系都有一个关系名,就是表名记录 表中的行字段 表中的列 也称属性域 取值范围关联 不同数据库表之间的数据联系关键字 属性或属性的组合,可以用于唯一标识一条 ...

  5. 简单理解 SVM

    SVM,中文名叫支持向量机. 在深度学习出现以前,它是数据挖掘的宠儿: SVM具有十分完整的数据理论证明,但同时理论也相当复杂. 初识SVM  同其他分类算法一样,SVM分类也是寻找合适的决策边界,为 ...

  6. 从.net parallel角度解读spark

    对于我这样一个一直工作在.net平台上的developer来讲,Hadoop,Spark,HBase等这些大数据名词比较陌生,对于分布式计算,.net上也有类似的Parallel(我说的不是HDIns ...

  7. VS2017 nlog源码查看报错

    最近下载nlog的源码学习,打开解决方案以后无法编译. C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\Sd ...

  8. 转:vim模式下报错E37: No write since last change (add ! to override)

    故障现象: 使用vim修改文件报错,系统提示如下: E37: No write since last change (add ! to override) 故障原因: 文件为只读文件,无法修改. 解决 ...

  9. 忽略SIGPIPE信号

    #include <stdlib.h> #include <sys/signal.h> void SetupSignal() { struct sigaction sa; // ...

  10. MTK平台-抓取蓝牙log

    一.MTKLOG抓取 .在拔号键盘输入暗码 *#*##*#* 进入工模EngineerMode .在 Log and Debugging -> MTKLogger 点击开始 .MTKLog存储路 ...