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 首先 ...
随机推荐
- 对低开销的静态组件使用v-once
<body> <div id="app"> <terms-of-service></terms-of-service> </d ...
- Python 字典dict相关知识
字典是无序的,多次print输出的结果不一样. 字典的key可以是数字.字符串.元组.布尔值(True为1,False为0,不可以和其他key值重复):列表和字典不能作为key. 字典的value可以 ...
- WINDOWS SERVER 2016 IE使用FLASH PLAYER的方法
Windows Server 2016出于安全的考虑,默认禁用了Flash Player.把Windows Server 2016作为日常操作系统的童鞋会发现,IE里完全没有Flash Player这 ...
- 20175224 2018-2019-2 《Java程序设计》第八周学习总结
教材学习内容总结 第十五章 泛型与集合框架 泛型 泛型:目的为建立具有类型安全的集合框架. 泛型类声明:class People<E> class 名称<泛型列表> 链表 定义 ...
- shell中脚本与函数的使用策略
脚本:运行的副作用不影响父环境,开辟了fork子进程; 函数:副作用,定义的变量,数据默认直接添加到了调用者的环境,也是它自己的环境;不想副作用影响调用者环境,就必须主动用local修饰; shell ...
- linux修改默认语言
echo $PATH #查看当前语言LANG=en_US.UTF-8 #临时修改当前语言,修改为英文echo 'LANG=en_US.UTF-8' > /etc/sysconfig/i18n # ...
- 【转】反编译D-Link路由器固件程序并发现后门
固件是D-link无线路由器(型号:DIR-100 revA)的固件程序 v1.13.使用工具Binwalk,很快的就从中发现并提取出一个只读SquashFS文件系统,没用多大功夫我就将这个固件程序的 ...
- ABP中mapping中忽略属性
创建一个XXXXProfile继承Profile,然后在构造函数中写忽略相关的,如下 public class ProductPriceDtoProfile: Profile { /// <su ...
- vue-resource+element upload上传(遇到formData总是变为object格式)
文件上传这种业务需求很常见,但是最近用了element,仔细看了文档,按照demo写了上传,与后台传参调取接口时,控制台总是显示未获取到文件,想了又想,发现一开始思路就跑遍了... 写此博记录下遇到的 ...
- Spring源码学习笔记2
1.默认标签的解析 对四种不同标签的解析 private void parseDefaultElement(Element ele, BeanDefinitionParserDelegate dele ...