angular1中ng-repeat效率优化方法:
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效率优化方法:的更多相关文章
- Kettle中ETL的效率优化
ETL效率优化 开启数据库日志记录及性能监控 如果我们想要优化一个ETL(KTR或者KJB)的性能,我们首先需要知道的就是它的瓶颈在哪里.而这些信息一般只能在ETL运行的步骤度量中看到,并且是不会持久 ...
- ASP.NET中26种性能优化方法
系统类 Type类,Object类,String类, Arrary类,Console类, Exception类,GC类, MarshalByRefObject类, Math类. DateTime结构 ...
- 项目中常用的MySQL优化方法--壹拾玖条
1.EXPLAIN 做MySQL优化,我们要善用EXPLAIN查看SQL执行计划. 下面来个简单的示例,标注(1.2.3.4.5)我们要重点关注的数据: type列,连接类型.一个好的SQL语句至少要 ...
- 事件委托,js中的一种优化方法
在前端编程中,我们常会遇到一种叫做事件委托的方法. 那么, 什么是事件委托呢? 简单来说,事件就是指onclick,onmouseover,onmouseout等大部分事件,为什么说是大部分后面会提到 ...
- 项目中常用的MySQL 优化
本文我们来谈谈项目中常用的MySQL优化方法,共19条,具体如下: 一.EXPLAIN 做MySQL优化,我们要善用EXPLAIN查看SQL执行计划. 下面来个简单的示例,标注(1.2.3.4.5)我 ...
- 19条常用的MySQL优化方法(转)
本文我们来谈谈项目中常用的MySQL优化方法,共19条,具体如下:1.EXPLAIN命令做MySQL优化,我们要善用EXPLAIN查看SQL执行计划.下面来个简单的示例,标注(1.2.3.4.5)我们 ...
- iOS-提高iOS开发效率的方法和工具
提高iOS开发效率的方法和工具 介绍 这篇文章主要是介绍一下我在iOS开发中使用到的一些可以提升开发效率的方法和工具. IDE 首先要说的肯定是IDE了,说到IDE,Xcode不能跑,当然你也可能同时 ...
- <转>提高iOS开发效率的方法和工具
介绍 这篇文章主要是介绍一下我在iOS开发中使用到的一些可以提升开发效率的方法和工具. IDE 首先要说的肯定是IDE了,说到IDE,Xcode不能跑,当然你也可能同时在使用AppCode等其他的ID ...
- 提高iOS开发效率的方法和工具
http://www.cocoachina.com/ios/20150717/12626.html 介绍 这篇文章主要是介绍一下我在iOS开发中使用到的一些可以提升开发效率的方法和工具. IDE 首先 ...
随机推荐
- hadoop管理命令
-help 功能:输出这个命令参数手册 -ls 功能:显示目录信息 示例: hadoop fs -ls hdfs://hadoop-server01:9000/ 备注:这些参数中,所有的hdfs ...
- SQLZOO网页中SQL的答案(SELECT from nobel篇)
SELECT from nobel篇 1. 更改查詢以顯示1950年諾貝爾獎的獎項資料. 答案: SELECT yr, subject, winner FROM nobel WHERE yr = 19 ...
- hive表分区操作
1.修复表分区命令 msck repair table table_name; 2.添加表分区操作 alter table table_name add partition(month_id='201 ...
- 在线jquery.min.js、vue.min.js引用
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js ...
- Unity3D AssetBundle的打包与加载
在Unity项目开发过程中,当要做热更新时常常使用一个叫做AssetBundle的东西,这里做一点个人的学习记录 步骤1: 设置打包标签:具体步骤----进入Unity,选择某一资源然后看右下角,在那 ...
- 从.net parallel角度解读spark
对于我这样一个一直工作在.net平台上的developer来讲,Hadoop,Spark,HBase等这些大数据名词比较陌生,对于分布式计算,.net上也有类似的Parallel(我说的不是HDIns ...
- java中List按指定大小分割
之前写过的代码,几个月后遇到类似的功能,感觉很熟悉,稍微费些劲也能做到,但是觉得有些不甘.明明之前整理好的为什么要重新做?百度参考其他人的思路感觉不是很顺心,个人原因吧.于是翻箱倒柜找出以前的代码,贴 ...
- Java编程思想 - 第11章 持有对象
· 大量笔记存放在Github Java文件中,请移步查看:https://github.com/iGuure/AndroidCodeHub/tree/master/Java%20pratice/Th ...
- 为什么想起开通blog?
为什么想起开通博客 2016年跨年夜写年终总结时,曾对自己许下愿,要成为一个会讲“故事”的人,无奈口才不行,写字也不好看,所以只能在电脑上码码字代替了. 在我看来,这“故事”该有许多种含义:首先,电子 ...
- UVA548 tree的思路
唔,首先这题给出了中序遍历和后序遍历要求我们求出, 一个叶子节点到根的数值总和最小,且这个叶子节点是最小的那个 这题的难点在于如何运用中序遍历和后序遍历还原整棵树, 这里有两个方法: 1. 递归构造原 ...