如何提高海量数据的prime ng下拉性能

Question

我在我们的 Angular 项目中使用了 primeng 多选下拉菜单。但是我们需要加载的数据非常庞大，比如 4-5K 个元素。所以我的下拉菜单在加载过程中需要 10 秒。

请建议我如何提高创建多选下拉列表的性能。

Answer 1

PrimeNG v8（以及根据我的经验，v7）有两个已记录的属性，涉及通过很长的选项列表提高 MultiSelect 输入的性能：

[virtualScroll]="true" itemSize="30"

virtualScroll

启用基本性能增强，但未能设置

itemSize

值会阻碍性能提高。

itemSize

影响分配给显示的选项面板中的选项的垂直空间量，并且

30

提供可接受的高度，用于渲染该面板中每个选项的复选框和相邻的单行文本。

通常，当对大于单行文本的图像或选项使用 MultiSelect 模板时，需要适当增加

itemSize

。 （虽然不太可能，但您也许可以使用较小的字体和缩小的

itemSize

塞入更多条目。）

请参阅 primefaces.org PrimeNG 文档中 MultiSelect 的“文档”选项卡的“虚拟滚动”部分。

Answer 2

您应该分叉

primeng repo 并更改多选组件中的实现（第 51 行）

它使用 *ngFor ti 列表值，但您应该使用

ng2-vs-for 更改它

ngFor 和 vs-for 的区别在于，并不是所有元素都会一次性添加到 dom 中，而是仅根据滚动位置添加您应该看到的项目。

Answer 3

我没有分叉该库，这会让您陷入特定版本，而是确定了哪些下拉列表具有如此多的值以至于它们滞后，并将这些 primeng 下拉列表更改为 primeng 自动完成，并且滞后消失了。

Answer 4

Мне помогло уменьшение размера объектов в 选项