Angular利用trackBy提升性能的方法

在Angular的模板中遍历一个集合（collection）的时候你会这样写：

<ul>
 <li *ngFor="let item of collection">{{item.id}}</li>
</ul>

有时你会需要改变这个集合，比如从后端接口返回了新的数据。那么问题来了，Angular不知道怎么跟踪这个集合里面的项，不知道哪些该添加哪些该修改哪些该删除。结果就是，Angular会把该集合里的项全部移除然后重新添加。就像这样：

这样做的弊端是会进行大量的DOM操作，而DOM操作是非常消耗性能的。

那么解决方案是，为*ngFor添加一个trackBy函数，告诉Angular该怎么跟踪集合的各项。trackBy函数需要两个参数，第一个是当前项的index，第二个是当前项，并返回一个唯一的标识，就像这样：

import{ Component } from '@angular/core';

@Component({
 selector: 'trackBy-test',
 template: `
 <ul><li *ngFor="let item of items; trackBy: trackByIndex">{{item.name}}</li></ul>
 <button (click)="getItems()">Get Items</button>
 `
})
export class TrackByCmp{
 items: any[]=[];
 constructor(){
  this.items = [{name:'Tom'},{name:'Jerry'},{name:'Kitty'}];
 }
 getItems(){
  this.items = [{name:'Tom'},{name:'Jerry'},{name:'Mac'},{name:'John'}];
 }
 trackByIndex(index, item){
  return index;
 }
}

这样做之后，Angular就知道哪些项变动了：

我们可以看到，DOM只重绘了修改和增加的项。而且，再次点击按钮是不会重绘的。但是在没有添加trackBy函数的时候，重复点击按钮还是会触发重绘的（可以回头看第一个GIF）。

以上所述是小编给大家介绍的Angular利用trackBy提升性能的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Angular利用trackBy提升性能的方法

    Angular利用trackBy提升性能的方法

    在Angular的模板中遍历一个集合(collection)的时候你会这样写: <ul> <li *ngFor="let item of collection">{{item.id}}</li> </ul> 有时你会需要改变这个集合,比如从后端接口返回了新的数据.那么问题来了,Angular不知道怎么跟踪这个集合里面的项,不知道哪些该添加哪些该修改哪些该删除.结果就是,Angular会把该集合里的项全部移除然后重新添加.就像这样: 这样做

  • 利用JavaScript的Map提升性能的方法详解

    前言 在ES6中引入JavaScript的新特性中,我们看到了Set和Map的介绍.与常规对象和Array不同的是,它们是"键控集合(keyed collections)".这就是说它们的行为有稍许不同,并且在特定的上下文中使用,它们可以提供相当大的性能优势. 在这篇文章中,我将剖析Map,它究竟有何不同,哪里可以派上用场,相比于常规对象有什么性能优势. Map与常规对象有什么不同 Map和常规对象主要有2个不同之处. 1.无限制的键(Key) 常规JavaScript对象的键必须是S

  • Rails中使用MySQL分区表一个提升性能的方法

    MySQL 的分区表是一种简单有效的处理极大数据表的特性,通过它可以使应用程序几乎很少改动就能达成对极大数据表的高效处理,但由于 Rails ActiveRecord 设计上一些惯例,可能导致一些数据处理不能利用分区表特性,反而变得很慢,在使用分区表过程中一定要多加注意. 下面以一个例子来说明.在 light 系统中,有一张数据表是 diet_items, 主要字段是 id, schedule_id, meal_order food_id, weight, calory 等等,它的每一条记录表示

  • .NET使用Collections.Pooled提升性能优化的方法

    .NET使用Collections.Pooled提升性能优化的方法

    目录 简介 Collections.Pooled 如何使用 性能对比 PooledList<T> PooledDictionary<TKey, TValue> PooledSet<T> PooledStack<T> PooledQueue<T> 未手动释放场景 原理解析 总结 简介 性能优化就是如何在保证处理相同数量的请求情况下占用更少的资源,而这个资源一般就是CPU或者内存,当然还有操作系统IO句柄.网络流量.磁盘占用等等.但是绝大多数时候,我

  • 提升MongoDB性能的方法

    MongoDB 是高性能数据,但是在使用的过程中,大家偶尔还会碰到一些性能问题.MongoDB和其它关系型数据库相比,例如 SQL Server .MySQL .Oracle 相比来说,相对较新,很多人对其不是很熟悉,所以很多开发.DBA往往是注重功能的实现,而忽视了性能的要求.其实,MongoDB和 SQL Server .MySQL .Oracle 一样,一个 数据库对象的设计调整.索引的创建.语句的优化,都会对性能产生巨大的影响. 为了充分挖掘MongoDB性能,现简单总计了以下18条,欢

  • Angular 利用路由跳转到指定页面的指定位置方法

    之前做过页面内的跳转,比较简单,最近项目需要实现跨页面跳转,并跳转到指定地点,试了很多方法,有用到传递参数然后让页面滚动相应的距离,但是一旦文章长短发生变化,滚动的距离也需要重新计算,比较麻烦,所以最后总结出这两种比较靠谱的方法,只需要在需要跳转的地方加上合适的id就行,原理和单页面内跳转相似. detail.component.html <p>You'll see which payment methods are available to you on the checkout page,

  • 优化Apache服务器性能的方法小结

    测试与提高性能 Apache服务器已经被设计得尽可能的快,即使你用一台配置不高的机器,用不着进行太复杂的设置,它的响应内容就足以塞满以前的各种窄带连接.但随网站内容日益复杂和带宽的增加,对Apache进行优化以取得更好的性能变得日益重要起来. 如果优化的结果仅仅是极小的性能提升那真是浪费时间.试想一下,你花了好几个小时甚至几天调整Apache的各种参数但结果仅是几个百分点的性能提升?因此,在优化前你做的第一步应该是测试你目前的服务器的性能水平以便决定如何优化你的服务器并衡量优化的效果. 关于对A

  • 9种改善AngularJS性能的方法

    9种改善AngularJS性能的方法

    AngularJS 是目前使用非常广泛的 web app 应用框架,随着它的受欢迎程度持续上升 ,期待已久的AngularJS 4.0 诞生了.尽管已经做了很多优化,但几乎每个 Angular 专家仍然在处理使用 AngularJS 中出现的各种各样的问题. 目前,企业使用Web技术用在他们各自项目上,在线业务因此受到了极大影响.因此,有必要深入挖掘影响企业成长的各种因素. 但是,有可能不正确地使用 AngularJS 方法会影响你的应用程序在市场上的排名,因此 AngularJS 性能优化成为

  • redis通过pipeline提升吞吐量的方法

    案例目标 简单介绍 redis pipeline 的机制,结合一段实例说明pipeline 在提升吞吐量方面发生的效用. 案例背景 应用系统在数据推送或事件处理过程中,往往出现数据流经过多个网元: 然而在某些服务中,数据操作对redis 是强依赖的,在最近的一次分析中发现: 一次数据推送会对 redis 产生近30次读写操作! 在数据推送业务中的性能压测中,以数据上报 -> 下发应答为一次事务:而对于这样的读写模型,redis 的操作过于频繁,很快便导致系统延时过高,吞吐量低下,无法满足目标:

  • .NET使用结构体替代类提升性能优化的技巧

    .NET使用结构体替代类提升性能优化的技巧

    目录 前言 现实的案例 内存占用 计算速度 总结 附录 前言 我们知道在C#和Java明显的一个区别就是C#可以自定义值类型,也就是今天的主角struct,我们有了更加方便的class为什么微软还加入了struct呢?这其实就是今天要谈到的一个优化性能的Tips使用结构体替代类.那么使用结构体替代类有什么好处呢?在什么样的场景需要使用结构体来替代类呢?今天的文章为大家一一解答.注意:本文全部都以x64位平台为例 现实的案例 举一个现实系统的例子,大家都知道机票购票的流程,开始选择起抵城市和机场(

随机推荐