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. ubuntu 谷歌浏览器打开时需要输入密码来解锁密码环

    问题: ubuntu14.04, 设置系统自动登陆账户,但每次开机打开 google chromium 浏览器,会要求输入一次密码,来解锁登录密钥环.很麻烦. 解锁登录密钥环:输入密码以解锁您的登录密 ...

  2. 机器学习sklearn

    sklearn相关模块导入 from sklearn.feature_extraction import DictVectorizer from sklearn.feature_extraction. ...

  3. js获取元素属性值为空的原因和解决办法

    问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...

  4. Java抽象类总结规定

    1. 抽象类不能被实例化(初学者很容易犯的错),如果被实例化,就会报错,编译无法通过.只有抽象类的非抽象子类可以创建对象. 2. 抽象类中不一定包含抽象方法,但是有抽象方法的类必定是抽象类. 3. 抽 ...

  5. java基础知识—类的方法

    1.定义类方法的语法: 访问修饰符 返回值类型 方法名(){ 方法体: } 2.方法名的规范: 1.必须以字母下划线·“—”或“$”开头 2.可以有数字,但不能以数字开头. 3.如果方法名是以多个单词 ...

  6. 关于Grid Layout

    .wrapper {     display: grid;/*产生一个块级的网格*/     grid-template-columns: repeat(3, 1fr);/*利用空格分隔的值定义网格的 ...

  7. python命令行运行py文件找不到模块的解决办法

    问题: 新建了一个项目,目录结构如下: 然后在pycharm中运行glovar是没有问题的,但是在命令行中运行就会提示找不到init模块 这是因为在pycharm中运行的时候,pycharm会自动将项 ...

  8. JAVA EE------XML

    1.XML定义:在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息比如文章等.它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语 ...

  9. Delphi非官方的补丁

    http://git.kngstr.com/KngStr/delphi-fixes 使用方法 方法一: 1. 拷贝需要的补丁文件到你的工程目录 2. 拷贝编译的时候缺少或错误的文件到你的工程目录 优缺 ...

  10. 今天遇到一个关于栈溢出的问题StackOverflowError

    关于这个问题个人认为是一个比较棘手的问题,因为我们每个人遇到溢出问题的原因都不一样,所以遇到这样的问题就多从问题的根本入手. 我遇到的原因是,循环多次导致的,以为我的俩个互相关联的实体类,当作查询时, ...