有时候一次性从后台拿到大量数据后渲染到页面上的时候比较卡，而获取数据的接口还是比较快的，这时候就需要前端懒加载了。
一般我们在组件中用*ngFor遍历数据渲染页面，我们可以在html中这样做：
<div nz-popconfirm *ngFor="let user of sharedUsersValues; let i = index; trackBy: userTrackBy">
<span class="user-label">{{ user.label }}</span>
</div>
在ts中这样做：
userTrackBy(index: number, user: ShareUserOption) {
return user.value.userId;
}
在页面中添加一个加载更多的按钮，每次点击时就会加载更多的数据（往sharedUsersValuespush更多（定量）的数据），而trackBy支持每次只渲染新增加的数据，而不会重新渲染全部的数据，这样可以大大缓解页面卡顿的现象。
当然解决方式还有很多，比如分页等等。
有时候一次性从后台拿到大量数据后渲染到页面上的时候比较卡，而获取数据的接口还是比较快的，这时候就需要前端懒加载了。...
前端性能优化之Lazyload @(冬晨)[JavaScript|技术分享|懒加载] [TOC] Lazyload...
懒加载 js懒加载 意义 懒加载（LazyLoad）是前端优化的一种有效方式，能极大的提升用户体验，图片加载是其重...
一、懒加载 这里以手机淘宝为例，我们并不需要在进入页面时显示所有资源，当用户下拉时我们再展示后续内容：我们来做一个...
前端实现图片懒加载(lazyload)的两种方式 原生JS实现最简单的图片懒加载 30行Javascript代码实...
1，懒加载原理？https://bbs.damoxueyuan.com/?thread-22.htm 一般来讲，给...
图片懒加载（必须指定div的高度，否则有offsetTop有误差）
首页加载优化，前端需要考虑的点： 路由懒加载；开发环境使用如下路由加载方式，避免热更新问题module.expor...
提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说,下面我用最简洁明了的语言说明懒加载和预加载的核心要点以...
前端项目中，图片的加载也是一个比较重要的点。优化的方向，大都在加载方式和加载过程上。加载方式也都是在懒加载的方式，...
本文标题：前端懒加载之trackBy
本文链接：https://www.haomeiwen.com/subject/qjoefqtx.html
网友评论