如何提高大数据的prime ng下拉性能答案

【问题标题】：How to improve prime ng dropdown performance for huge data如何提高大数据的prime ng下拉性能
【发布时间】：2023-03-28 19:14:01
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

PrimeNG v8（根据我的经验，v7）有两个记录在案的属性，这些属性涉及通过非常长的选项列表来提高 MultiSelect 输入的性能：

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

virtualScroll 启用基本性能增强，但未能设置 itemSize 值会阻止性能提高。

itemSize 影响分配给显示选项面板中选项的垂直空间量，30 提供了一个可接受的高度，用于呈现该面板中每个选项的复选框和相邻的单行文本。

通常，当使用多选模板处理大于单行文本的图像或选项时，需要适当增加itemSize。（虽然不太可能，但您可以使用较小的字体和减少的itemSize 填入更多条目。）

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

【讨论】：

恕我直言，这应该是公认的答案，在我的情况下，已经完成了项目 pTemplate 的 CSS，我认为 itemSize 可能不再需要，将其删除，就像 p-multiSelect 在单击时是只读的它什么也没做，在加载之前它是 10 秒或更长时间，它是如此缓慢（大约 10k 个项目）。将 itemSize 放回（[virtualScroll]="true" 仍然存在）并立即加载。也许控制 API 可以改进，但它们是免费的，所以不能抱怨！
谢谢。我在他们的文档中错过了它。

【解决方案2】：

您应该 fork primeng repo 并更改多选组件中的实现 (line 51)

它使用 *ngFor ti 列表值，但您应该使用 ng2-vs-for 更改它

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

【讨论】：

【解决方案3】：

我没有分叉库，这会让您停留在特定版本上，而是确定了哪些下拉菜单具有太多的值以至于它们滞后，并更改了这些 Primeng 下拉菜单以进行自动完成，并且滞后消失了。

【讨论】：