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. 对低开销的静态组件使用v-once

    <body> <div id="app"> <terms-of-service></terms-of-service> </d ...

  2. Python 字典dict相关知识

    字典是无序的,多次print输出的结果不一样. 字典的key可以是数字.字符串.元组.布尔值(True为1,False为0,不可以和其他key值重复):列表和字典不能作为key. 字典的value可以 ...

  3. WINDOWS SERVER 2016 IE使用FLASH PLAYER的方法

    Windows Server 2016出于安全的考虑,默认禁用了Flash Player.把Windows Server 2016作为日常操作系统的童鞋会发现,IE里完全没有Flash Player这 ...

  4. 20175224 2018-2019-2 《Java程序设计》第八周学习总结

    教材学习内容总结 第十五章 泛型与集合框架 泛型 泛型:目的为建立具有类型安全的集合框架. 泛型类声明:class People<E> class 名称<泛型列表> 链表 定义 ...

  5. shell中脚本与函数的使用策略

    脚本:运行的副作用不影响父环境,开辟了fork子进程; 函数:副作用,定义的变量,数据默认直接添加到了调用者的环境,也是它自己的环境;不想副作用影响调用者环境,就必须主动用local修饰; shell ...

  6. linux修改默认语言

    echo $PATH #查看当前语言LANG=en_US.UTF-8 #临时修改当前语言,修改为英文echo 'LANG=en_US.UTF-8' > /etc/sysconfig/i18n # ...

  7. 【转】反编译D-Link路由器固件程序并发现后门

    固件是D-link无线路由器(型号:DIR-100 revA)的固件程序 v1.13.使用工具Binwalk,很快的就从中发现并提取出一个只读SquashFS文件系统,没用多大功夫我就将这个固件程序的 ...

  8. ABP中mapping中忽略属性

    创建一个XXXXProfile继承Profile,然后在构造函数中写忽略相关的,如下 public class ProductPriceDtoProfile: Profile { /// <su ...

  9. vue-resource+element upload上传(遇到formData总是变为object格式)

    文件上传这种业务需求很常见,但是最近用了element,仔细看了文档,按照demo写了上传,与后台传参调取接口时,控制台总是显示未获取到文件,想了又想,发现一开始思路就跑遍了... 写此博记录下遇到的 ...

  10. Spring源码学习笔记2

    1.默认标签的解析 对四种不同标签的解析 private void parseDefaultElement(Element ele, BeanDefinitionParserDelegate dele ...