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. web网页错误代码的含义

    web网页错误代码的含义 一.1xx 表示临时响应并需要请求者继续进行操作的状态码,例如: 100--继续:101--切换协议 二.2xx 表示服务器成功的处理了请求的状态码,例如: 200--客户端 ...

  2. 第2次作业 -- 熟悉 JUnit 测试

    2.1 Mooctest 使用心得 Mooctest很方便,可以即时测评自己写的测试代码,获得覆盖率和报告,不需要自己安装配置环境 而且安装配置插件的环境也很简单,可以专注于测试本身 2.2 Juni ...

  3. OO第一单元作业总结之初识面向对象

    第一个单元的三次作业均为求导,循序渐进的让我们掌握如何构造类和方法,让整个代码是面向对象的设计而不是面向过程的设计.如果第一次作业和第二次作业你只是简单的对过程着手架构类,到了第三次作业就会变得格外麻 ...

  4. 算数运算符& 关系运算符

    java中的算数运算符 + - * / % ++ -- + +: 加法运算符 - : 减法运算符 *: 乘法运算符 / : 除法运算符 注意: 除数不能为0,除数为0会报出异常 整数运算默认得到整数, ...

  5. ConcurrentHashMap源码

    ---------------------------------------------------------------------------------------------------- ...

  6. GoGland 快捷键说明

    关于Gogland一些常用快捷键的说明,我在网上没有搜索到,于是乎,我找到了官网中的视频介绍,然后将其中的一部分摘录了出来,希望能帮住大家... Gogland——使用说明前面是苹果|后面是linux ...

  7. 转载 * jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小

    由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...

  8. iOS 10 Programming Fundamentals with Swift 学习笔记 0

    1,a single statement can be broken into multiple lines ,For example, after an opening parenthesis is ...

  9. github项目

    一.github项目地址: https://github.com/fairy1231/gitLearning/tree/master 二.github的重要性: Git 是一个快速.可扩展的分布式版本 ...

  10. 嵌入式C语言编译器

    GCC与gcc: 初识编译器: 扩展问题: 如何理解“多语言混合开发”? 参考: 狄泰软件学院唐佐林视频教程