angular - 如何为大型阵列加快ngFor？

Question

我正在研究Pokedex site，由于现在有了721 Pokemon，所以ngFor会花很长时间才能第一次显示所有条目。加载完所有数据后，将它们实际放入DOM似乎要花费大约2400毫秒。

这是有问题的ngFor:

<entry *ngFor="let p of (pokedex | filter:search:SelectedVer), let i = index, let last = last"
    [id]="'pokemon-entry-' + p.id"
    [pokemon]="p"
    [language]="SelectedLang"
    (click)="SelectPokemon(p)"></entry>

我在Chrome的开发工具中运行了时间表，并得到了如下所示的内容:



我对时间轴没有太多经验，但是在我看来，中间的块太大了(顶部标记为 XHR Load (/csv/pokemon_game_indices.csv))。根据时间轴，ajax调用本身需要0.02毫秒。我假设使这个很大的块是ajax请求完成后发生的更改检测。那就是当我拿起我一直在构建的模型并将它们放在ngFor上面使用的 pokedex变量中的时候。我对时间轴的理解是，由ngFor添加的721个DOM元素的构建大约需要2.5秒的时间。

我确实尝试将 entry组件取消组件化为仅html(该组件实际上不执行任何操作)，但这似乎并没有以任何明显的方式影响时间。删除我用来过滤列表的管道也不会影响时间。

有没有办法加快这个ngFor？

我正在使用Angular 2 RC1。我正在启用产品模式。我正在Chrome 51.0.2704.79 m中运行它

Answer 1

简短而甜美的回答是“不要遍历整个数组”，但这对我来说还不够好。我希望它看起来像是整个条目列都存在。所以我在上面放置了一个间隔，ngFor遍历了数组的一个子部分，在下面放置了一个间隔，这一起使列表看起来像所有元素一直存在。

这是我的html的简化版本，仅包含此问题的相关部分(full example on bitbucket):

<div (scroll)="ColScroll($event)">
  <div [style.height]="Math.max(0, Math.max(0, scrollPos - 10) * 132)"></div>
  <entry *ngFor="let p of (base.pokemon | filter:search:SelectedVer:SelectedLang) | justafew:scrollPos" [pokemon]="p"></entry>
  <div [style.height]="Math.max(0,((base.pokemon | filter:search:SelectedVer:SelectedLang).length - scrollPos - 40)) * 132"></div>
</div>

超细结构，绝对清晰:

<div> <!-- column -->
  <div></div> <!-- spacer -->
  <entry *ngFor='...'></entry>
  <div></div> <!-- spacer -->
</div>

首先，一个非常关键的点: <entry>总是正好为120像素高，底部边缘为12像素，总共占总空间132像素。 CSS做到了这一点。无论我要选择什么恒定大小，它都可以工作，但是我做出特殊的假设，即大小恰好是132像素。

简短的版本是，当您滚动列的scrollHeight时，可以确定实际应显示在屏幕上的条目。如果ngFor实际构建的前10个元素不在屏幕上，则第一个可见元素从数字11开始。我占一个4k屏幕，并显示40个条目(占用5280个像素)，以确保整个列看起来都是完整的。然后，滚动条看起来正确，我在40个条目下面有一个间隔，以强制div具有适当的可滚动高度。这是视觉上发生的情况的图像:



这是 Controller 中的相关变量和函数( bitbucket):

scrollPos = 0;
...
ColScroll(event: Event) {
  let pos = $(event.target).scrollTop();
  this.scrollPos = Math.floor(pos / 132);
}

在这里使用jQuery会让我丧命，但是我已经将它用于其他用途，并且我需要跨浏览器。 scrollPos保留了我应该在屏幕上显示的第一项的第一个索引。

实际构建所有 <entry>元素的ngFor如下所示:

*ngFor="let p of (base.pokemon | filter:search:SelectedVer:SelectedLang) | justafew:scrollPos"

分解:
base.pokemon是创建每个入口元素所需的口袋妖怪数据的数组。
... | filter:search:SelectedVer:SelectedLang)用于搜索列表。我将其留在此处的示例中，以表明您仍然可以在我的黑客入侵之前使用列表。
... | justafew:scrollPos是神奇的地方。这是整个过滤器( bitbucket):

import { Pipe, PipeTransform } from '@angular/core';

import { MinPokemon } from '../models/base';

@Pipe({
  name: 'justafew',
  pure: false
})
export class JustAFewPipe implements PipeTransform {
  public transform(value: MinPokemon[], start: number): MinPokemon[] {
    return value.slice(Math.max(0, start - 10), start + 30);
  }
}

scrollPos作为 start参数传入。例如，如果我向下滚动了13200个像素，则 scrollPos将设置为100(请参见上方 Controller 中的滚动事件)。这将对数组进行 slice ，使其返回从90到130的元素。我想在屏幕上稍微溢出一点，以确保快速滚动不会导致可见的空白(疯狂的快速滚动可能仍会显示它，但是您移动得如此之快很容易想到浏览器的渲染速度还没有那么快，所以我让它滑动了)。我使用 Math.max，所以我不会使用负数进行 slice ，例如当我位于列表的顶部并且 scrollPos为0时。

现在是垫片。他们保持滚动条诚实。我绑定(bind)他们的 [style.height]并使用一些数学运算法则来使这些间隔符占用所需的空间。当我向下滚动时，顶部间隔物会变高，而底部间隔物会收缩完全相同的量，因此列始终处于相同的高度。当我向上滚动时，数学结果恰好相反:顶部缩小，底部增长。底部的分隔符使用与ngFor完全相同的过滤器逻辑，因此，如果我运行返回100而不是721 pokemon的搜索，它将调整为100个条目的高度。第一个分隔符使用 scrollPos - 10，因为 justafew过滤器返回10。出于相同的原因，底部分隔符使用 scrollPos - 30，因为这就是返回的 justafew多少。

我知道它看起来像很多 Activity 部件，但是它们都很简单快捷。不幸的是，到处都有很多相互依赖的“魔术数字”，但是考虑到性能的提高和可靠性，这使我无法显示整个列表，而让我感到困惑。也许有一天，我将制作一个组件或指令以将其全部放置在一个可配置的位置。

更新:大约2 1/2年后，使用Angular 7发行的 there's now a Angular Material package for virtual scrolling。我在网站上制作了 a few changes，并在大约一个小时内完成了虚拟滚动。即使有组件回收。我完全建议使用Angular Material进行虚拟滚动。