Angular-使用好NgForOf的trackBy带来性能上的提升

最新推荐文章于 2024-02-21 01:30:00 发布
VIP文章 最新推荐文章于 2024-02-21 01:30:00 发布
阅读量3.2k 收藏 3
点赞数 1
分类专栏： 前端 程序员 互联网 IT 编程 文章标签： 前端 编程 程序员 IT 互联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tzllxya/article/details/93508467
版权

Angular-使用好NgForOf的trackBy带来性能上的提升

 

官方文档，查看“变更的传导机制”即有详细的表述：

即使数据没有变化，迭代器中的元素标识符也可能会发生变化。比如，如果迭代器处理的目标是通过 RPC 从服务器取来的， 而 RPC 又重新执行了一次。那么即使数据没有变化，第二次的响应体还是会生成一些具有不同标识符的对象。Angular 将会清除整个 DOM， 并重建它（就仿佛把所有老的元素都删除，并插入所有新元素）。这是很昂贵的操作，应该尽力避免。

NgForOf - Angular 官方文档

那么如何来避免呢？

要想自定义默认的跟踪算法， NgForOf支持trackBy选项。trackBy接受一个带两个参数（index和 item）的函数。 如果给出了trackBy，Angular 就会使用该函数的返回值来跟踪变化。

可惜官网提供的例子无法运行，自己来个例子似乎会更好理解：

    最低0.47元/天 解锁文章
    程序员一木
    关注
    • 1
      点赞
    • 踩
    • 3
      收藏
      觉得还不错? 一键收藏
    • 1
      评论
    专栏目录
    angular-react：在Angular中使用React组件
    01-31
    React对Angular的支持 行业趋势，组织压力和其他因素可能导致对组件库的使用或从一种技术迁移到另一种技术的要求。 对于需要使用的 ，必须使用React编写客户端（最新版本没有Angular组件库）。 从Angular重写为React可能会导致成本过高或出于其他原因而被建议使用。 使用Angular-React可以使用Angular [2+]应用程序中的所有React元素，尤其是Office UI Fabric。 Office UI Fabric的包装器库简化了Angular对这些组件的使用。 但是，任何React代码都可以使用自定义Angular-React渲染器。 图书馆 @ angular-react包含两个单独的库： ： 包括渲染器和支持逻辑，以将具有React实现的Angular组件渲染为React组件。 ： 轻量级的Angular组件包装器通过常见的Angular组件（在许多情况下包括命令式和声明性语法）公开了Fabric React组件API。 快速链接 | | | | 典型用例 在Angular中使用React组件库 逐步将Angular应用程序重
    Angular性能优化之——trackBy
    KenkoTech的博客
    11-25 818
    Angular Trackby
    Angular 中的 ngFor 指令
    最新发布
    rubys007的博客
    02-21 278
    您还可以为以下导出值设置局部变量：index、first、last、even 和 odd。index 将返回当前循环索引，而其他值将提供一个布尔值，指示该值是 true 还是 false。
    angular-cron-gen:用户使用Angular以图形方式构建cron表达式的基本方法
    05-17
    角冠词 用户以图形方式构建cron表达式的基本方法。 演示可以在找到。 要求： AngularJS 1.5+ 用法： 在您的应用程序中包含依赖项 angular . module ( 'myApp' , [ 'angular-cron-gen' ] ) 包括提供的JS和CSS文件（或创建自己CSS以覆盖默认值）。 < link rel =' stylesheet ' href =' build/cron-gen.min.css ' type =' text/css ' media =' all ' /> < script type =' text/javascript ' src =' build/cron-gen.min.js ' > </ script > 就这样-您完成了！ 通过凉亭： $ bower install angular-cron-gen 通过npm：
    Angular利用trackBy提升性能的方法
    08-28
    主要介绍了在Angular中利用trackBy来提升性能的实现方法,需要的朋友可以参考下
    Angular优化
    zhytang的专栏
    03-30 1877
    Angular 性能检查清单 简介 这份清单涵盖了许多提高 Angular 应用性能的实践。本清单 涵盖了不同的主题，其中包括服务端渲染，预渲染和构建应用，还包括运行时的性能和变更检测。 这份清单分为两个大的部分： 网络性能 - 列举一些能够改善你的应用程序加载时间的最佳实践，包括网络延迟和低带宽的情况。 运行时性能 - 提高我们应用运行时性能的最佳实践，包括变更检测机制和渲染相关的优化。 ...
    Angular ngIf ngSwitch ngForOf
    yanyi24的博客
    01-20 1169
    ngIf、ngSwitch、ngForOf 这一节，我们将介绍angular内置指令：ngIf、ngSwitch、ngForOf。这也是日常开发中经常会遇到的常见指令。原文阅读 ngIf ngIf是内置的结构型指令，控制宿主元素的添加或删除，取决于绑定的值是否为真。（跟vue的v-if是类似的，不是控制display属性） 单独使用ngIf import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app
    Angular *ngFor中使用trackBy提升性能
    qq_36181877的博客
    02-11 1338
    一、我们经常这样用： HTML <ul> <li *ngFor="let item of itemList">{{item.name}}<li> <ul> 二、trackBy的使用场景： 如果集合itemList数据发生改变，angular不知道如何跟踪集合里面的每一项，就删除了全部的项然后再重新赋值。这样就进行了大量的DOM操作，体验很不好。我们使用TrackBy来跟踪集合里面的每一项，页面就只重绘新增和修改的项，大大提升页面性能。 HT
    从 Angular 2 升级到 Angular 13 之后的一些常见错误和解决方案
    SAP 资深技术专家 Jerry Wang 的技术分享
    01-13 1441
    错误：The selector app-root did not match any elements 这个错误消息倒和 Angular 的版本没有关系。 index.html 里定义的 selector 必须和 App.module.ts 里定义的 AppComponent selector 一致： 错误2：unhandled promise rejection 原因： 在 Angular 2 里，导入 rxjs 操作符的语法： import 'rxjs/add/observable/fromEv
    Angular4_NgForOf 指令作用
    Martin 的博客
    12-03 7859
    NgForOf 指令作用
    angular-tree-component的使用详解
    10-18
    主要介绍了angular-tree-component的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    angular-gridster2：Angular gridster 2
    02-06
    角网格2Angular-gridsterAngular实现需要Angular 11.x对于其他Angular版本，请检查其他分支。安装npm install angular-gridster2 --save 应该与webpack开箱即用，分别是angular-cli。 import { GridsterModule } ...
    Angular性能优化
    wondermaomao的博客
    03-25 807
    Angular性能优化基础ngFor加trackBy少重复运算，多使用存Pipe管道少监听DOM：避免频繁触发变更检测触发Angular变更检测如何监听事件不触发变更检测减少变更检测：OnPush策略组件传值@Input的变化监听Angular生命周期优化预加载和懒加载服务端渲染SSR 基础 一些好的的性能优化基础提高渲染。 ngFor加trackBy <ul> <li *ngFor = "let item of arr;index as i;trackBy:trackByFn">
    Angular 性能优化实战
    X01动力装甲的专栏
    08-14 1646
    Angular 是一个非常强大的前端框架，但是如果不注意性能优化，应用程序可能会变得非常慢并增加加载时间。
    Angular 由一个bug说起之二：trackBy的一点注意事项
    KenkoTech的博客
    11-16 1648
    接下来我改变一下数据，调用一下changeData，把张三变成未婚，王五变成已婚。数据正常更新了，这是没有加trackBy的时候，现在添加一下trackBy。组件没有重新生成，数据也没有更新，这是因为test组件的更新机制有问题。我在这里循环一个数组，显示人物的资料，姓名，年龄，婚否。接下来我用一个例子来演示一下。点击changeData。
    深入了解Angular中的变更检测如何帮助我提高应用程序的性能
    小红帽的博客
    11-25 560
    使用Angular框架开发Web应用程序时，我们很少考虑性能影响。Angular旨在快速发展，总的来说使我们摆脱了性能调试的麻烦，因此我们最终失去了对“性能优先”开发实践的控制。随着我们的应用程序的增长以及我们添加业务逻辑的各层，我们可能会面临性能指标的下降，最终会导致整体用户体验的下降。我将主要关注运行时性能以及在生产Web应用程序中进行改进的尝试。 1. 一个非常繁忙的app 让我解释一下我遇...
    angular 性能_如何从Angular应用中获得最佳性能
    08-03 303
    angular 性能by Mark Grichanik 马克·格里卡尼克(Mark Grichanik) 如何从Angular应用中获得最佳性能 (How to get the best performance out of your Angular apps) Angular is a great framework and can be used for developing large ...
    Angular ngFor 便捷用法及解读
    Lance1ot的博客
    11-12 5179
    ngFor 文章目录ngFor便捷用法源码注释ngFor 是什么ngFor 与 DOMngFor 与 trackByngFor 在 ng-template 上的使用方式ngFor 与 $implicit ngFor 在开发使用上已经是比较普遍了，这里主要介绍下一些通常不被关注的便捷用法 便捷用法 ngFor 不仅仅提供了 index 属性（索引属性），还提供了一些实用的对外属性，所有实用对外属性如下： index ：元素索引 first ：是否为第一个元素 last ：是否为最后一个元素 even ：是否
    angular 如何引进 @auth0/angular-jwt
    06-13
    要在Angular中使用`@auth0/angular-jwt`，需要先安装该库。可以使用以下命令进行安装： ``` npm install @auth0/angular-jwt ``` 安装完成后，可以在需要使用`@auth0/angular-jwt`的组件或服务中引入该库，示例...

    “相关推荐”对你有帮助么？

    • 非常没帮助
    • 没帮助
    • 一般
    • 有帮助
    • 非常有帮助
    提交
    评论 1
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值